単一ページの e コマース アプリを構築しています。製品ページは、レスポンシブ グリッドのカードに基づいています。製品ページ全体を表示するためのアニメーションやonClick、フルスクリーンに展開するカードを作成したいと考えています。springease
問題は、カードがグリッドに結び付けられており、常に中央にあるとは限らないことです。私が CSS アニメーションでやろうとしたことはすべて、アニメーションの観点からはひどく見え、コードの観点からは自転車のように感じました。
要するに、これを達成するための最良の方法は何ですか、どのパスを選択する必要がありますか? そして、私が今持っているグリッドで本当に可能ですか、それとも別のことを試す必要がありますか? Framer Motionアニメーションライブラリとして使用することを考えました。
ここで、私が達成したいものに似たものを見ることができます: https://youtu.be/XyBbFMhMtik?t=10
そして、ここに私が今持っているものの簡略化されたコードサンドボックスがあります: https://codesandbox.io/s/dank-water-o2lpp
