Pure Javascript を使用した数行のカートに飛ぶアニメーション。

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

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

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

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

以上がPure Javascript を使用した数行のカートに飛ぶアニメーション。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。