最近、jQuery を使用したカートに移動するアニメーションを紹介する古いチュートリアルを偶然見つけました。純粋な JavaScript を使用して同じ効果を実装して自分自身に挑戦したいと思いました。

商品とショッピングカートのアイコンをシンプルにレイアウトしてみました。スタイルは重要ではないので、ここでは説明しません。

秘訣は、製品の画像を複製し、それを製品要素の先頭に追加することです。次に、クローン画像とカート アイコンの座標を計算し、違いを取得し、画像をそれに変換します。 0 へのスケーリングや不透明度のフェードなどの追加の効果を追加できます。 スタイルの変更を実際にアニメーション化するトランジション プロパティを追加します

カートアイコンにもアニメーションを配置したい場合は、クローン画像のtransitionstartイベントとtransitionendイベントを使用して、アニメーションが設定されたCSSクラスを追加および削除します。