ホームページ  >  記事  >  ウェブフロントエンド  >  Pure Javascript を使用した数行のカートに飛ぶアニメーション。

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

DDD
DDDオリジナル
2024-09-25 20:23:22868ブラウズ

Fly to cart animation with Pure Javascript in few lines.

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

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

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。