Animations AngularJS

Avec l'aide de CSS, AngularJS fournit des transitions d'animation.

Qu'est-ce que l'animation ?

L'animation est une illusion de mouvement apportée par la transformation des éléments HTML.

l'instance

Cochez la case pour masquer le DIV :

Module :
Masquer le DIV : <input type="checkbox" ng-model="myCheck">
<h1>Cacher DIV : <input type="checkbox" ng-model="myCheck"></h1>
</body>

Essayer vous-même

Votre application ne devrait pas être envahie d'animations, mais certaines animations peuvent rendre l'application plus facile à comprendre.

Qu'ai-je besoin ?

Pour préparer votre application aux animations, vous devez inclure la bibliothèque AngularJS Animate :

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Puis, vous devez vous référer à l'application dans le module. ngAnimate Ensuite, vous devez vous référer à l'application :

Module :

<body ng-app="ngAnimate"> ngAnimate Ou, si votre application a un nom, veuillez ajouter

l'instance

Ajouter en tant que dépendance du module de l'application :
<body ng-app="myApp">
<h1>Cacher DIV : <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);

Essayer vous-même

</script>

ngAnimate Qu'est-ce que le module ngAnimate ?

ngAnimate Le module ne rend pas vos éléments HTML animés, mais il ajoute et supprime des classes. ngAnimate Lorsqu'il est détecté 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 instructions d'ajout et de suppression des classes en AngularJS incluent :

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show et ng-hide Instructions d'ajout et de suppression ng-hide Valeurs de classes.

Les autres instructions ajoutent ng-enter Valeurs de classes, et ajoutent ng-leave propriétés.

Lorsque l'élément HTML change de position,ng-repeat Les instructions ajoutent également ng-move Valeurs de classes.

En plus, pendant le processus d'animation, l'élément HTML aura un ensemble de valeurs de classes, qui seront supprimées après la fin de l'animation. Par exemple :ng-hide Les instructions ajoutent ces valeurs de classes :

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Pour cacher un élément)
  • ng-hide-remove(Pour afficher un élément)
  • ng-hide-add-active(Pour cacher un élément)
  • ng-hide-remove-active(Pour afficher un élément)

Animation avec CSS

Nous pouvons utiliser les transitions CSS ou les animations CSS pour ajouter des effets d'animation aux éléments HTML. Ce tutoriel vous les présentera.

Pour en savoir plus sur les animations CSS, consultez nos tutoriels sur les transitions CSS et les animations CSS.

Transitions CSS

Les transitions CSS permettent de modifier en douceur la valeur d'une propriété CSS pendant une période donnée :

l'instance

quand l'élément DIV obtient .ng-hide Lorsque la transition est en cours, elle durera 0.5 seconde, la hauteur passera en douceur de 100px à 0 :

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Essayer vous-même

Animations CSS

Les animations CSS permettent de modifier en douceur une valeur d'attribut CSS au cours d'une période donnée :

l'instance

quand l'élément DIV obtient .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Essayer vous-même