Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place la librairie Animate CSS pour animer le bloc product-reviews-summary short au chargement de la page page-products catalog-category-view avec l’animation SlideInUp.
Ajouter les sources d’Animate CSS 3 dans: /<Vendor>/<theme>/web/css/vendor/animate/. Pour éviter de surcharger les sources CSS en production, nous allons importer uniquement l’animation qui nous intéresse (SlideInUp) et pas la librairie complète. Pour rendre l’ensemble disponible pour plus tard, vous pouvez placer ici l’ensemble des sources (fichiers animate.css, animate.min.css et dossier complet /source.
Ajouter au fichier /<Vendor>/<theme>/web/css/source/_theme.less (ou un autre fichier de votre thème qui centralise les imports de third-party libraries):
|
1 |
@import '../vendor/animate/source/sliding_entrances/slideInUp.css'; |
Ajouter au fichier /<Vendor>/<theme>/Magento_Catalog/web/css/source/_extend.less:
|
1 2 3 4 5 6 7 8 |
// // Common (style-m.css) // _____________________________________________ & when (@media-common = true) { .product-reviews-summary.short { animation: slideInUp 0.75s; } } |
Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Il faut, bien sûr, qu’un processus de compilation des assets front-end (server side ou client side) soit en-train de tourner.