問題タブ [framer-motion]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 製品カードをフルスクリーンにシームレスに展開
単一ページの e コマース アプリを構築しています。製品ページは、レスポンシブ グリッドのカードに基づいています。製品ページ全体を表示するためのアニメーションやonClick、フルスクリーンに展開するカードを作成したいと考えています。springease
問題は、カードがグリッドに結び付けられており、常に中央にあるとは限らないことです。私が CSS アニメーションでやろうとしたことはすべて、アニメーションの観点からはひどく見え、コードの観点からは自転車のように感じました。
要するに、これを達成するための最良の方法は何ですか、どのパスを選択する必要がありますか? そして、私が今持っているグリッドで本当に可能ですか、それとも別のことを試す必要がありますか? Framer Motionアニメーションライブラリとして使用することを考えました。
ここで、私が達成したいものに似たものを見ることができます: https://youtu.be/XyBbFMhMtik?t=10
そして、ここに私が今持っているものの簡略化されたコードサンドボックスがあります: https://codesandbox.io/s/dank-water-o2lpp
