Nombreux sont les développeurs amoureux des animations dans une application web ou mobile. Aujourd’hui, nous avons décidé de montrer comment intégrer animate.css dans un projet Ionic afin de rendre le rendu de nos interfaces plus jouissifs. Sans plus tarder, voici les différentes étapes à suivre :
Stars do not pull each other down to be more visible; they shine brighter.
🚀 Étape 1: Création du projet Ionic
En supposant que nous avons déjà installé la CLI de Ionic comme l’indique la documentation ici, il nous suffira d’écrire cette ligne de commande depuis un terminal :
Après la création du projet, ouvrez-votre projet avec votre IDE préféré.
🚀 Étape 2: Ajout de la librairie animate.css
L’ajout de la librairie animate.css dans un projet Ionic est très simple. Tout ce que nous aurons à faire est de l’installer depuis le gestionnaire de packages Node Package Manager à travers la commande suivante:
À la fin de l’installation, en consultant le fichier package.json, nous verrons dans nos dépendances le package animate.css avec la version la plus récente.
🚀 Étape 3: Configuration de la librairie animate.css
Tout comme l’installation, nous ne ferons rien d’extraordinaire pour configurer notre librairie. Rendons-nous dans le fichier global.scss se trouvant dans le dossier src de notre projet (src/global.scss) et ajoutons cette ligne :
Après l’ajout de cette ligne, notre fichier global.scss devrait ressembler à ceci :
🚀 Étape 4: Utilisation des classes css offertes par la librairie animate.css
Tout ce que nous aurons à faire est d’appeler deux classes au minimum afin de gérer nos animations sur le code HTML voulu.
La première classe est « animate__animated » qui indique qu’il s’agira d’une animation et la seconde classe est le type d’animation voulu.
En voici un exemple concret :
Ici, nous voulons animer nos components ion-card à l’affichage.
✅ La classe animate__animated pour indiquer qu’il s’agit d’une animation ;
✅ La classe animate__lightSpeedInRight pour indiquer le type d’animation voulu ;
Voici le rendu quand nous sommes sur :
🔥un navigateur avec ionic serve :
🔥 un iOS :
🔥 un Android :
Retrouvez le code source sur GitHub en cliquant sur ce lien : https://github.com/vy-group/IonicAnimationTest.git
Voici un autre exemple d’animation toujours en se référant à la documentation de animate :
🔥 iOS:
🔥 Android:
Enjoy coding and stayed tuned !!!
2 commentaires
Simple et efficace
Merci Godwin !