Animation Fly to Cart avec Pure Javascript en quelques lignes.

Récemment, je suis tombé sur un vieux tutoriel présentant une animation fly-to-cart utilisant jQuery. Je voulais me mettre au défi en implémentant le même effet en utilisant du JavaScript pur.

J'ai créé une mise en page simple avec des produits et une icône de panier. Le style n'a pas d'importance, nous n'en discuterons donc pas ici.

L'astuce consiste à cloner l'image du produit, en l'ajoutant au début de l'élément produit. Ensuite, calculez les coordonnées de votre image clonée et de l'icône de votre panier, obtenez la différence et traduisez votre image dessus. Vous pouvez ajouter des effets supplémentaires comme une mise à l'échelle à 0 ou une décoloration de l'opacité. Ajoutez une propriété de transition pour qu'elle anime réellement les changements de style

Si vous souhaitez également mettre des animations sur l'icône du panier, utilisez les événements transitionstart et transitionend sur l'image clonée pour ajouter et supprimer une classe CSS avec une animation définie dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!