JavaScript はサムネイルから全幅の画像ページへのスムーズな移行を実装します

Question

http://manifesto.clapat.com/

ホームページ上の項目をクリックすると、サムネイルから全画面画像に遷移し、その画像がその項目のページのタイトルになります。これらのトランジション効果はどのように作成されるのでしょうか。また、React Router ではなく内部ルーティングを使用してそれらを実装する最善の方法は何でしょうか。ただし、誰かが React Router で動作させることができるのであれば、それを移植することもできます。

利用可能なチュートリアルがいくつかありますが、それらはすべて、別のプロジェクト ページに移動するのではなく、全画面モーダル コンポーネントと同様に、同じページにデータを読み込みます。主な目的は、画像を読み込んだまま他のページに遷移することです。

Answer 1

通常のレンダリング方法では、ページにジャンプするまで画像の読み込みが開始されないため、この効果を実現するにはサーバー側レンダリングが必要です。 Next.js では、そのページを指す 要素を含むページにいる限り、Link 要素を介してアクセスされるすべてのページが事前レンダリングされます。

この効果を実現するには、まず CSS で画像の位置を固定に設定し、次にトランジション効果を作成し、画像を幅: 100%、高さ: 100% にスケールし、トランジション時間を次のように設定する必要があります。 500 ミリ秒、トランジション終了後に背景に画像がある次のページに自動的にジャンプするようにタイマーを設定する必要があります。これを行う必要があるかどうかはわかりませんが、ページが事前レンダリングされ、ページにルーティングされたときに画像がすぐに読み込まれるように、どこかに を含めてください。

＃＃＃一ページ目：＃＃＃ リーリー ＃＃＃次のページ：＃＃＃ リーリー

この例は読みやすくするために tailwindcss で作成しましたが、他の CSS ライブラリでも同じ効果を実現できます。移行をスムーズにするには、移行期間と setTimeout の期間を同じに設定するだけで済みます。これにより、移行が完了し、両方のページの画像がまったく同じになった場合にのみページがリダイレクトされます。

あなたが必要としていた答えが得られたことを願っています。例のクラスが何を行うかを確認する必要がある場合は、

tailwindcss ドキュメント

を参照してください。