Animation AngularJS


AngularJS fournit des effets d'animation qui peuvent être utilisés avec CSS.

Pour utiliser l'animation dans AngularJS, vous devez importer la bibliothèque angulaire-animate.min.js. 

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Vous devez également utiliser le modèle ngAnimate dans votre application : 

<body ng-app="ngAnimate">

Qu'est-ce que l'animation ?

L'animation est un effet dynamique produit en modifiant les éléments HTML.

Instance

Cochez la case pour masquer le DIV :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Note应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。

Si notre application a défini un nom d'application, nous pouvons ajouter ngAnimate directement au modèle :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour voir l'exemple en ligne

Que fait ngAnimate ?

Le modèle ngAnimate peut ajouter ou supprimer des classes.

Le modèle ngAnimate ne peut pas animer les éléments HTML, mais ngAnimate surveillera les événements, tels que le masquage et l'affichage des éléments HTML. Si un événement se produit, ngAnimate utilisera une classe prédéfinie pour animer les éléments HTML.

Instructions AngularJS pour ajouter/supprimer des classes :

  • ng-show

  • ng-hide

  • ng-class

  • ng-view

  • ng-include

  • ng-repeat

  • ng-if

  • ng-switch

ng-show et Les directives ng-hide sont utilisées pour ajouter ou supprimer des valeurs de la classe ng-hide.

D'autres instructions ajouteront la classe ng-enter lors de la saisie du DOM, et l'attribut ng-leave sera ajouté lors de la suppression du DOM.

Lorsque la position de l'élément HTML change, la directive ng-repeat peut également ajouter la classe ng-move.

De plus, la collection de classes de l'élément HTML sera supprimée une fois l'animation terminée. Par exemple : La commande ng-hide ajoutera la classe suivante :

  • ng-animate

  • ng-hide-animate

  • ng-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é)

Utiliser les animations CSS

Nous pouvons utiliser la transition CSS ou l'animation CSS pour animer des éléments HTML. Pour cette partie, vous pouvez vous référer à notre tutoriel de transition CSS et notre tutoriel d'animation CSS.

Transition CSS

La transition CSS nous permet de changer en douceur une valeur de propriété CSS en une autre :

Exemple

Lorsque le DIV l'élément est défini sur la classe .ng-hide, la transition prend 0,5 seconde et la hauteur passe de 100px à 0 :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Animation CSS

L'animation CSS vous permet de modifier Propriétés CSS en douceur Valeur :

Instance

Lorsque la classe .ng-hide est définie sur l'élément DIV, l'animation myChange sera exécutée et la hauteur changera en douceur de 100px à 0 :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck">
</div>


</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne