Préface
AngularJS fournit des effets d'animation qui peuvent être utilisés avec CSS. Angularjs nécessite l'introduction de angular-animate.min.js lors de l'utilisation de l'animation.
<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:
<corps ng-app = "nganimate">
1. Qu'est-ce que l'animation?
L'animation est un effet de changement dynamique généré en modifiant les éléments HTML.
<! 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 = "js / angular.min.js"> </ script> <script src = "js / angular-animate.min.js"> </ script> </ head> <body ng-app = "nganatem"> <h3> masquer div: <entrée = "checkbox" ng model = "mycheck"> <h3> <h3> ng-hide = "MyCheck"> </div> </ body> </html> Si notre application a défini le nom de l'application, nous pouvons ajouter directement ngAnimate au modèle:
<! 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 = "js / angular.min.js"> </ script> <script src = "js / angular-animate.min.js"> </ script> </ad> <body ng-app = "myapp"> <h3> cacher div: <entrée = "checkbox" ng-model = "mycheck"> <h3> <h3> <h3 ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']); </cript> </ body> </html>2. Qu'est-ce que Nganimate a fait?
Le modèle ngAnimate peut ajouter ou supprimer la classe. Le modèle ngAnimate 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. AngularJS directifs pour ajouter / supprimer la classe: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) Classe NG spécifie la classe CSS utilisée par les éléments HTML
La directive ng-class est utilisée pour lier dynamiquement une ou plusieurs classes CSS aux éléments HTML. La valeur de la directive ng-class peut être une chaîne, un objet ou un tableau. S'il s'agit d'une chaîne, plusieurs noms de classe sont séparés par des espaces. S'il s'agit d'un objet, vous devez utiliser une paire de valeurs clés , qui est une valeur booléenne , et la valeur est le nom de classe que vous souhaitez ajouter. La classe ne sera ajoutée que si la clé est vraie . S'il s'agit d'un tableau, il peut être composé de chaînes ou de combinaisons d'objets, et les éléments du tableau peuvent être des chaînes ou des objets.
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <title> angularjs </ title> <script src = "js / angular.min.js"> </cript> <script src = "js / angular-animate.js"> </script> <style> .sky {couleur: blanc; Color d'arrière-plan: LightBlue; rembourrage: 20px; Font-Family: "Courier New";}. Tomate {fond-couleur: corail; rembourrage: 40px; Font-Family: Verdana;} </ Style> </ Head> <Body ng-App = ""> <span> Sélectionnez une classe: </span> <SELECT NG-MODEL = "HOME"> <Option Value = "Sky"> Color Sky </ Option> <Option Value = "Tomato"> Tomato Color </popoption> </lect> <div ng-Class = "Home"> <h3> Wellow Home! it! </h4> </div> </body> </html>(2) Ng-Class-même est similaire à la classe NG, mais ne fonctionne que sur des lignes uniques; Ng-Class-ODD est similaire à la classe NG, mais ne fonctionne que sur des lignes impairs; Ng-Class-ODD est similaire à la classe NG, mais ne fonctionne que sur des lignes impairs;
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> angularjs </ title> <script src = "js / angular.min.js"> </ script> <style> .stripedeven {couleur: blanc; Color d'arrière-plan: cyan;}. StripedOdd {couleur: blanc; Background-Color: YellowGreen;} </ Style> </ Head> <Body Ng-App = "MyApp"> <Table Ng-Controller = "MyCtrl"> <Tr> <Th> Name </ Th> <Th> Country </th> </tr> <tr ng-repeat = "x In Record ng-class-odd = "'stripedOdd'"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </sable> <cript> var app = angular.module ("myapp", []); $scope.records = [ { "Name" : "Alfreds Futterkiste", "Country" : "Germany" }, { "Name" : "Berglunds snabbk", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "Country" : "Autriche"}]}); </cript> </body> </html>(3) ng-si si la condition est fausse, supprimez les éléments HTML
ng-if est utilisée pour supprimer les éléments HTML lorsque l'expression est fausse. Si le résultat de l'exécution de l'instruction IF est vrai, l'élément supprimé sera ajouté et affiché. ng-if est différente de ng-hide , ng-hide cache les éléments, tandis que ng-if supprime les éléments du DOM.
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> angularjs </ title> <script src = "js / angular.min.js"> </ script> </ head> <body ng-app = "" ng-init = "myvar = true"> <h3> ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> bienvenue </h1> <p> bienvenue chez moi. </p> <hr> </div> <p> L'élément div est supprimé lorsque la case n'est pas coché. </p> <p> Lorsque la case à cocher est relue, l'élément div sera redéfini. </p> </ body> </html>
(4) Ng-Checked Spécifie si l'élément est sélectionné
La directive ng-checked est utilisée pour définir les propriétés cochées d'une case à cocher ou d'une radio. Si ng-checked Renvoie True, la case à cocher ou le bouton radio sera sélectionnée.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script></head><body ng-app=""> <h3>My cars:</h3> <input type="checkbox" ng-model="all"> Check all<br> <input type = "checkbox" ng-checked = "all"> volvo <br> <entrée type = "checkbox" ng-checked = "all"> Ford <br> <entrée type = "Checkbox" ng-checked = "all"> Ford <br> <entrée type = "Checkbox" ng-cecked = "all"> ng-coched = "all"> MercEdes <H3> CLICK "CLICK" VOTH ". </h3> </ body> </html>
3. Utilisez l'animation CSS
Nous pouvons utiliser CSS Transition ou CSS Animation pour faire l'animation des éléments HTML.
(1) transition CSS
La transition CSS nous permet de modifier en douceur une valeur d'attribut CSS à une autre: lorsque .ng-hide est définie sur l'élément div, la transition prend 0,5 seconde et que la hauteur passe de 100px à 0.
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> angularjs </ title> <script src = "js / angular.min.js"> </ script> <script src = "js / angular-animate.min.js; Color d'arrière-plan: LightBlue; Hauteur: 100px;}. ng-hide {hauteur: 0;} </ style> </ head> <body ng-app = "myApp"> <h1> masquer div: <input type = "checkbox" ng-model = "mycheck"> </h1> <div ng-hide = "mycheck"> </v> <script> var app = angular.module ('myapp', </v> <script> var app = angular.module ('myApp', ['nganimate']); </cript> </ body> </html>(2) Animation CSS
L'animation CSS vous permet de modifier en douceur les valeurs d'attribut CSS: Lorsque .ng-hide est définie sur l'élément div, l'animation myChange sera exécutée, et il changera en douceur la hauteur de 100px à 0.
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> angularjs </ title> <script src = "js / angular.min.js"> </ script> <script src = "js / angular-animate.min.js"> </cript> <style> @ @KeyFrames mychanged {from {orthingx; } à {hauteur: 10; }} div {hauteur: 100px; Background-Color: LightBlue;} div.ng-hide {Animation: 10s MyChange;} </ Style> </ Head> <Body Ng-App = "Nganimate"> Masquer Div: <Input Type = "Checkbox" ng-model = "MyCheck"> <div ng-hide = "Mycheck"> </v> </ody> </html>Résumer
Ce qui précède est tout au sujet de l'animation angularjs. Cet article le résume en détail et fournit un exemple de code. J'espère que cela sera utile à tous ceux qui apprendront des annuels.