Share
Lorsqu'elles sont utilisées correctement, les animations peuvent rendre une application Web amusante à utiliser. Les navigateurs modernes sont capables d'animer différents éléments sur une page Web en utilisant simplement CSS. Si vous utilisez AngularJS dans l'un de vos projets, vous pouvez également utiliser le module ngAnimate pour y ajouter une animation de manière angulaire..
Le module ngAnimate vous permet d’ajouter des animations CSS ainsi que des animations JavaScript à vos projets. Les animations basées sur CSS incluent des images clés et des transitions. Les animations basées sur JavaScript doivent être enregistrées à l'aide de module.animation (). Dans ce didacticiel, vous apprendrez à ajouter des animations CSS aux directives intégrées AngularJS prenant en compte l'animation pour rendre vos applications plus attrayantes..
La première chose que vous devez faire pour ajouter des animations est d'inclure angular-animate.js dans votre projet. Une fois cela fait, vous pouvez inclure le module ngAnimate en tant que dépendance dans votre application pour commencer à animer différents éléments..
Accentsconagua
angular.module ('app', ['ngAnimate']);Voici une liste des différentes directives tenant compte de l'animation et des événements d'animation que vous pouvez utiliser pour les animer:
ng-répéter peut détecter entrer, laisser et bouge toi événements.ng-view, ng-include, ng-switch et ng-si peut détecter entrer et laisser événements.ng-show, ng-hide et ng-classe peut détecter ajouter et retirer événements.ng-message peut aussi détecter entrer et laisser événements.N'oubliez pas que ces points d'ancrage ne sont pas activés par défaut. ils ne deviennent actifs qu'après avoir ajouté le module ngAnimate à votre application.
La directive ng-if dans AngularJS est utilisée pour ajouter ou supprimer des éléments du DOM en fonction de la valeur d'une expression donnée. Lorsque l'expression est évaluée à faux, l'élément est supprimé du DOM. Lorsque l'expression est évaluée à vrai, un clone de l'élément est réinséré dans le DOM. Cet ajout et ce retrait d'éléments est instantané. Cependant, vous pouvez animer les éléments supprimés ou recréés à l'aide du module ngAnimate..
Si les éléments sont ajoutés au DOM, vous pouvez utiliser le ng-enter et ng-enter-active classes pour les animer. Le code de transition ainsi que l’état de départ de l’animation sont ajoutés dans la ng-enter classe. L'état final de l'animation est ajouté au sein de la ng-enter-active classe. Voici le code pour montrer des barres rouges en animant leur hauteur.
.red-bar.ng-enter transition: tout en douceur 0.25s; hauteur: 0px; .red-bar.ng-enter.ng-enter-active hauteur: 30px;
De même, vous pouvez également appliquer une animation pour masquer les barres à l’aide des touches ng-quitter et le ng-leave-active Des classes. J'ai omis l'animation pour supprimer les barres rouges afin que vous puissiez voir clairement la différence entre les états animés et non animés.
La directive ng-view dans AngularJS est utilisée en tant que conteneur pour recharger une partie de la page lorsque l'utilisateur bascule entre différentes vues..
Tout comme l'ajout et la suppression d'éléments à l'aide de ng-si, Ce processus se produit également très rapidement. Si vous souhaitez animer l'entrée et la sortie de différents éléments dans la vue, vous pouvez utiliser le même ancien ng-enter, ng-enter-active, ng-quitter, et ng-leave-active Des classes.
Outre ces quatre classes, il existe aussi un ng-animate classe. Au cours de l'animation, cette classe est également ajoutée à tous les éléments devant être animés. Vous pouvez l'utiliser pour fournir toutes les règles CSS qui doivent être applicables au cours de l'animation. Voici un exemple:
.planet-view.ng-animate transition: all easy 0.4s; position: absolue; .planet-view.ng-enter top: 200px; opacité: 0; .planet-view.ng-leave, .planet-view.ng-enter.ng-enter-active top: 0; opacité: 1; .planet-view.ng-leave.ng-leave-active top: -200px; opacité: 0;
Comme vous pouvez le constater dans le code ci-dessus, une durée de transition de 0,4 seconde a été appliquée à toutes les propriétés. Lorsque l’information d’une planète spécifique entre dans la vue, elle commence par une opacité de zéro et la Haut position réglée à 200px. Dans le même temps, les éléments sur le point de quitter la vue ont une opacité de 1.
À la fin de la transition, les éléments entrants atteignent la position supérieure de la vue et deviennent complètement opaques. De même, les éléments qui partent s'animent à une position 200px au dessus de la vue et disparaissent. Cela nous donne un bel effet lorsque les informations apparaissent en fondu en bas et en fondu en haut de la page..
Dans ce qui suit ng-view démo, essayez de cliquer sur le nom de différentes planètes pour voir le entrer et laisser animations en action.
Les informations sur la composition atmosphérique des planètes terrestres sont extraites de cette page..
La directive ng-repeat dans AngularJS est utilisée pour instancier un modèle une fois par élément dans une collection donnée. Cette directive est utilisée lorsque vous essayez de trier, filtrer, ajouter ou supprimer des éléments d'une collection. Trois événements d’animation peuvent être déclenchés avec ng-répéter.
Dans les deux dernières sections, vous avez utilisé des transitions CSS pour animer différents éléments. Dans cette section, vous apprendrez à animer différents éléments à l'aide de l'animation par images clés. Je fournirai le code de la transition et de l'animation par images clés afin que vous puissiez voir la différence entre les deux..
Voici le code de transition pour animer les éléments:
.tâche-item.ng-enter, .task-item.ng-permission transition: tous linéaires 0.25s; .task-item.ng-leave top: 0; opacité: 1; .task-item.ng-leave.ng-leave-active top: 200px; opacité: 0; .task-item.ng-enter opacité: 0; en haut: -500px; .task-item.ng-enter.ng-enter-active opacité: 1; en haut: 0px;
Comme vous pouvez le constater, ce code est très similaire au code de transition que nous utilisions jusqu’à présent. Les états de départ sont définis dans ng-enter et ng-quitter. Les états finaux sont définis dans ng-enter-active et ng-leave-active.
Le code suivant recrée le même effet à l'aide d'animations d'images clés.
@keyframes added from opacity: 0; en haut: -500px; à opacité: 1; en haut: 0px; @keyframes delete from top: 0; opacité: 1; à top: 200px; opacité: 0; .task-item.ng-enter animation: 0.25s added; .task-item.ng-leave animation: 0,25s supprimés;
Cette fois, nous utilisons le CSS animation propriété pour ajouter l'animation. L'animation réelle est définie à l'aide de @ keyframes. Les états initial et final de différents éléments ont été définis dans les images clés elles-mêmes. Veuillez noter que nous n'avons pas à utiliser le ng-enter-active et ng-leave-active classes plus. L’utilisation des images clés présente l’un des avantages suivants: l’animation peut désormais être beaucoup plus complexe qu’une simple transition..
Essayez d'ajouter et de supprimer certaines tâches dans la démo suivante pour voir l'animation en action..
Envato Tuts + a également publié un tutoriel sur la validation de vos formulaires à l’aide de ngMessages. Dans la dernière section de ce didacticiel, vous avez appris à afficher les messages d'erreur uniquement lorsqu'un utilisateur a touché un champ de saisie. Tous les messages d'erreur de ce didacticiel apparaissent et disparaissent instantanément..
Si vous souhaitez ajouter une animation subtile pour afficher ou masquer les messages d'erreur, vous pouvez le faire facilement en utilisant le module ngAnimate. Comme mentionné au début de ce tutoriel, ng-message peut détecter entrer et laisser événements. Cela signifie que vous pouvez utiliser le ng-enter et ng-enter-active classes pour spécifier l’état initial et final des messages d’erreur actuellement affichés aux utilisateurs. De même, vous pouvez utiliser le ng-quitter et ng-leave-active des classes pour spécifier l'état initial et final des messages d'erreur en cours de dissimulation aux utilisateurs.
Voici un exemple de modification de la propriété opacity pour les messages d'erreur.
.error-msg.ng-enter transition: 0.5s tout linéaire; opacité: 0; .error-msg.ng-enter.ng-enter-active opacité: 1;
J'ai ajouté un message d'erreur classe à tous les messages d'erreur, et vous pouvez ajouter vos propres classes et mettre à jour le code en conséquence. Dans ce cas, je n'ai pas appliqué d'animation de messages d'erreur devenus invalides et qui ne devraient plus être montrés aux utilisateurs. Cela signifie qu'ils vont disparaître instantanément. Voici la démo qui montre comment utiliser ngMessages et ngAnimate ensemble.
Ce tutoriel vous a montré comment ajouter une animation à vos applications Web AngularJS à l'aide du module ngAnimate. Vous avez également appris à appliquer différentes animations à un élément en fonction de l'événement déclencheur. La dernière section explique comment utiliser le module ngAnimate avec d'autres modules tels que ngMessages pour ajouter de belles animations aux messages d'erreur.
Une chose que vous devez garder à l’esprit lors de l’utilisation d’animations est de ne pas en abuser. Trop d'animations peuvent distraire les utilisateurs de la fonction principale de l'application. Utilisez uniquement des animations lorsque vous pensez qu'elles peuvent réellement améliorer l'expérience utilisateur..
J'espère que vous avez apprécié ce tutoriel. Si vous avez des conseils, des suggestions ou des questions concernant le module ngAnimate, veuillez commenter..
