Animations AngularJS
AngularJS fournit des transitions animées, avec l'aide de CSS.
Qu'est-ce qu'une animation ?
Une animation, c'est quand la transformation d'un élément HTML vous donne une illusion de mouvement.
Exemple:
Cochez la case pour masquer le DIV :
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Les applications ne doivent pas être remplies d'animations, mais certaines animations peuvent faciliter la compréhension de l'application.
De quoi ai-je besoin?
Pour rendre vos applications prêtes pour les animations, vous devez inclure la bibliothèque AngularJS Animate :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Ensuite, vous devez vous référer au ngAnimatemodule dans votre application :
<body ng-app="ngAnimate">
Ou si votre application a un nom, ajoutez ngAnimatecomme dépendance dans votre module d'application :
Exemple
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
Que fait ngAnimate ?
Le module ngAnimate ajoute et supprime des classes.
Le module ngAnimate n'anime pas vos éléments HTML, mais lorsque ngAnimate remarque certains événements, comme le masquage ou l'affichage d'un élément HTML, l'élément obtient des classes prédéfinies qui peuvent être utilisées pour créer des animations.
Les directives dans AngularJS qui ajoutent/suppriment des classes sont :
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Les directives ng-showet ajoutent ou suppriment une valeur de classe.ng-hideng-hide
Les autres directives ajoutent une ng-entervaleur de classe lorsqu'elles entrent dans le DOM et un ng-leaveattribut lorsqu'elles sont supprimées du DOM.
La ng-repeatdirective ajoute également une ng-movevaleur de classe lorsque l'élément HTML change de position.
De plus, pendant l'animation, l'élément HTML aura un ensemble de valeurs de classe, qui seront supprimées lorsque l'animation sera terminée. Exemple : la
ng-hidedirective ajoutera ces valeurs de classe :
ng-animateng-hide-animateng-hide-add(si l'élément sera masqué)ng-hide-remove(si l'élément sera affiché)ng-hide-add-active(si l'élément sera masqué)ng-hide-remove-active(si l'élément sera affiché)
Animations utilisant CSS
Nous pouvons utiliser des transitions CSS ou des animations CSS pour animer des éléments HTML. Ce tutoriel vous montrera les deux.
Pour en savoir plus sur CSS Animation, étudiez notre CSS Transition Tutorial et notre CSS Animation Tutorial .
Transitions CSS
Les transitions CSS vous permettent de changer les valeurs des propriétés CSS en douceur, d'une valeur à une autre, sur une durée donnée :
Exemple:
Lorsque l'élément DIV obtient la .ng-hideclasse, la transition prendra 0,5 seconde et la hauteur passera en douceur de 100 pixels à 0 :
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animation CSS
CSS Animations permet de changer les valeurs des propriétés CSS en douceur, d'une valeur à l'autre, sur une durée donnée :
Exemple:
Lorsque l'élément DIV obtient la .ng-hideclasse, l' myChange
animation s'exécute, ce qui modifie en douceur la hauteur de 100px à 0 :
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>