AngularJS fournit des transitions animées, avec l'aide de CSS.
Qu'est-ce qu'un Animation?
Une animation est lorsque la transformation d'un élément HTML vous donne une illusion de mouvement.
Exemple:
Cochez la case pour cacher la DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Essayez - le vous - même »  | Les demandes ne doivent pas être remplis avec des animations, mais certaines animations peuvent rendre l'application plus facile à comprendre. |
|---|
De quoi ai-je besoin?
Pour rendre vos applications prêtes pour les animations, vous devez inclure la bibliothèque AngularJS Animate:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Ensuite , vous devez consulter le ngAnimate module dans votre application:
<body ng-app="ngAnimate"> Ou si votre application a un nom, ajoutez ngAnimate comme une 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> Essayez - le vous - même » Qu'est-ce que ngAnimate Do?
Le module ngAnimate ajoute et supprime des classes.
Le module ngAnimate ne pas animer vos éléments HTML, mais quand ngAnimate remarquez certains événements, comme cacher ou montrer d'un élément HTML, l'élément obtient certaines classes prédéfinies qui peuvent être utilisés pour faire des animations.
Les directives en AngularJS qui Ajout / Suppression de classes sont:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
Le ng-show et ng-hide directives ajoute ou supprime un ng-hide valeur de classe.
Les autres directives ajoute un ng-enter la valeur de classe quand ils entrent dans les DOM, et un ng-leave attribut quand ils sont retirés de la DOM.
Le ng-repeat directive ajoute également un ng-move valeur de classe lorsque l'élément HTML change de position.
En outre, lors de l'animation, l'élément HTML aura un ensemble de valeurs de classe, qui seront retirés lorsque l'animation est terminée. Exemple: le ng-hide directive va ajouter ces valeurs de la classe:
-
ng-animate -
ng-hide-animate -
ng-hide-add(si l'élément sera caché) -
ng-hide-remove(si l'élément sera montré) -
ng-hide-add-active(si l'élément sera caché) -
ng-hide-remove-active(si l'élément sera montré)
Animations Utilisation CSS
Nous pouvons utiliser des transitions CSS ou des animations CSS pour animer des éléments HTML. Ce tutoriel va vous montrer à la fois.
Pour en savoir plus sur CSS Animation, étudier notre CSS Tutorial Transition et notre Tutoriel CSS animation .
CSS Transitions
transitions CSS vous permet de modifier 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 le .ng-hide classe, la transition prendra 0,5 secondes, et la hauteur va en douceur changer de 100px à 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Essayez - le vous - même » CSS Animations
CSS Animations vous permet de modifier 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 le .ng-hide classe, le myChange animation se déroulera, ce qui en douceur changer 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>
Essayez - le vous - même »