Vue3 - クリックしてショッピングカートに追加すると、商品はショッピングカートの吸着アニメーション効果に「飛び込み」、商品は放物線の軌道で指定された位置に飛び込み、ボタンをクリックすると、現在の商品がショッピングカートの中に飛び込みます。指定されたショッピングバッグアニメーション効果（詳細なサンプルコードチュートリアル、完璧な実装「カートに追加」アニメーション）

Vue2 バージョンが必要な場合は、この記事を参照してください。

この記事では、vue3 プロジェクトの開発において、製品をクリックしてショッピングカートに追加すると、カスタムコンテナーがショッピングカート内に「移動」する機能的効果を実現します。

その中で、プログラムは、商品リストやショッピングカートがページ上のどこにあっても、適切な放物線アニメーションを自動的かつ正確に見つけることができます。

下の図に示すように、ボタンをクリックすると、「カスタム」コンテナが自動的に表示され、現在のコンテナからショッピングカートまでスムーズに実行されます。

PCのWebページと携帯電話のWebページで使用でき、ロジックは同じですが、スタイルが異なります。

示例代码干净整洁，无任何乱七八糟的代码，您只需要改个样式就能用了

ここに画像の説明を挿入します

選択漏れを防ぐために、ワンクリックコピー機能をお勧めします。

任意のページを見つけてコピーし、ワンクリックで実行するだけです。

<!-- 自定义修改之前，建议查看文章底部的常见问题再改 -->