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.