Animation angularjs
AngularJS fournit des effets d'animation qui peuvent être utilisés avec CSS.
AngularJS utilise des animations pour introduire la bibliothèque angular-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 Nganatem dans votre application:
<corps ng-app = "nganimate">
Qu'est-ce que l'animation?
L'animation est un effet de changement dynamique généré en modifiant les éléments HTML.
Exemple
Cochez la case pour masquer Div:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> div {transition: tous linéaires 0.5s; Color d'arrière-plan: LightBlue; hauteur: 100px; Largeur: 100%; Position: relative; en haut: 0; gauche: 0;}. ng-hide {hauteur: 0; Largeur: 0; Color en arrière-plan: transparent; En haut: -200px; Gauche: 200px;} </ style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </ script> </ head> <body ng-app = "nganimate"> <h1> cache div: <entrée type = "casse" ng-model = "mycheck"> </h1> <putyle ng-hide = "MyCheck"> </div> </ body> </html>Effet de course:
Remarque: il ne devrait pas y avoir trop d'animations dans l'application, mais l'utilisation appropriée des animations peut augmenter la richesse de la page et faciliter la compréhension des utilisateurs.
Si notre application a déjà défini le nom de l'application, nous pouvons ajouter Nganate directement au modèle:
Exemple
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> div {transition: tous linéaires 0.5s; Color d'arrière-plan: LightBlue; hauteur: 100px; Largeur: 100%; Position: relative; en haut: 0; gauche: 0;}. ng-hide {hauteur: 0; Largeur: 0; Color en arrière-plan: transparent; En haut: -200px; Gauche: 200px;} </ style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </ script> </ head> <body ng-app = "myapp"> <h1> cacher div: <input type = "cockbox" ng-model = "mycheck"> </h1> <puty type = "cockbox" ng-model = "mycheck"> </h1> <put ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']); </cript> </ body> </html>Effet de course:
Qu'est-ce que Nganimate a fait?
Le modèle Nganate peut ajouter ou supprimer la classe.
Le modèle Nganate ne peut pas animer des éléments HTML, mais Nganimate surveillera les événements, similaires à la cachette 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.
Directive AngularJS pour ajouter / supprimer la classe:
ng-spectacle
norme
classe ng
Ng-View
ng inclure
ng-répétition
ng-if
interrupteur ng
Les directives NG-Sowing et Ng-Hide sont utilisées pour ajouter ou supprimer la valeur de la classe NG-Hide.
D'autres directives ajouteront la classe Ng-enter lors de la saisie du DOM et supprimeront le DOM ajoutera la propriété NG-Leave.
Lorsque la position de l'élément HTML change, la directive Ng-Repeat peut également ajouter la classe NG-Move.
De plus, une fois l'animation terminée, la collection de classe d'éléments HTML sera supprimée. Par exemple: la directive NG-Hide ajoutera la classe suivante:
ng-animation
ng-hidé
ng-hide-azy (si l'élément sera caché)
Ng-Hide-Remove (si l'élément sera affiché)
ng-hide-aactive-active (si l'élément sera caché)
Ng-Hide-Remove-active (si l'élément sera affiché)
Utilisation de l'animation CSS
Nous pouvons utiliser CSS Transition ou CSS Animation pour faire l'animation des éléments HTML. Vous pouvez vous référer à notre tutoriel de transition CSS et au tutoriel d'animation CSS.
Transition CSS
La transition CSS nous permet de modifier en douceur une valeur d'attribut CSS à une autre:
Exemple
Lorsque l'élément DIV a l'ensemble de classe .Ng-Hide, la transition prend 0,5 seconde et la hauteur passe de 100px à 0:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> div {transition: tous linéaires 0.5s; Color d'arrière-plan: LightBlue; hauteur: 100px;}. ng-hide {height: 0;} </ style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </ script> </ head> <body ng-app = "myapp"> <h1> cacher div: <input type = "cockbox" ng-model = "mycheck"> </h1> <puty type = "cockbox" ng-model = "mycheck"> </h1> <put ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']); </cript> </ body> </html>Animation CSS
L'animation CSS vous permet de modifier en douceur les valeurs de propriété CSS:
Exemple
Lorsque la classe .Ng-Hide est définie sur l'élément DIV, l'animation MyChange sera exécutée, ce qui changera en douceur la hauteur de 100px à 0:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> @keyframes mychange {from {height: 100px; } à {hauteur: 0; }} div {hauteur: 100px; Background-Color: LightBlue;} div.ng-hide {Animation: 0.5s MyChange;} </ style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </ script> </ head> <body ng-app = "nganimate"> masquer div: <entrée type = "checkbox" ng-model = "mycheck"> <div " ng-hide = "MyCheck"> </div> </ body> </html>Ce qui précède est une collection d'informations sur les animations angularjs. Veuillez y consulter si vous en avez besoin.