Prefacio
AngularJS proporciona efectos de animación que se pueden usar con CSS. AngularJS requiere la introducción de angular-animate.min.js cuando se usa animación.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
También debe usar el modelo ngAnimate en su aplicación:
<Body Ng-App = "NganiMe">
1. ¿Qué es la animación?
La animación es un efecto de cambio dinámico generado al cambiar los elementos HTML.
<! DocType html> <html> <head> <meta charset = "utf-8"> <style> div {transición: todos lineal 0.5s; Color de fondo: LightBlue; Altura: 100px; Ancho: 100%; Posición: relativo; arriba: 0; Izquierda: 0;} .ng-hide {altura: 0; Ancho: 0; Color de fondo: transparente; arriba: -200px; Izquierda: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animal.min.js"> </script> </thead> <body ng-app = "nangleiM ng-hide = "mycheck"> </div> </body> </html> Si nuestra aplicación ha establecido el nombre de la aplicación, podemos agregar ngAnimate directamente al modelo:
<! DocType html> <html> <head> <meta charset = "utf-8"> <style> div {transición: todos lineal 0.5s; Color de fondo: LightBlue; Altura: 100px; Ancho: 100%; Posición: relativo; arriba: 0; Izquierda: 0;} .ng-hide {altura: 0; Ancho: 0; Color de fondo: transparente; arriba: -200px; Izquierda: 200px;} </style> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animal.min.js"> </script> </bead> <body ng-app = "myapp"> <h3> esconde divs: <input type = "chechbox" ng-model = "mycheck"> <h3> <h3> <HiDHHiD H3> <HiDHHiD H3> <HiDHiCHAY <HIn ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganiMe']); </script> </body> </html>2. ¿Qué hizo Nganimate?
El modelo ngAnimate puede agregar o eliminar la clase. El modelo ngAnimate no puede animar elementos HTML, pero ngAnimate monitoreará eventos, similar a ocultar y mostrar elementos HTML. Si se produce un evento, ngAnimate usará una clase predefinida para animar elementos HTML. Directivas AngularJS para agregar/eliminar la clase: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) Ng-Class especifica la clase CSS utilizada por los elementos HTML
La directiva ng-class se usa para unir dinámicamente una o más clases de CSS a elementos HTML. El valor de la directiva ng-class puede ser una cadena, un objeto o una matriz. Si es una cadena, varios nombres de clase están separados por espacios. Si es un objeto, debe usar un par de valores clave , que es un valor booleano , y el valor es el nombre de clase que desea agregar. La clase solo se agregará si la clave es verdadera . Si es una matriz, puede estar compuesta de cadenas o combinaciones de objetos, y los elementos de la matriz pueden ser cadenas u objetos.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animal.js"> </script> <style> .sky {color: white; Color de fondo: LightBlue; relleno: 20px; Font-Family: "Courier New";}. Tomato {Color de fondo: Coral; relleno: 40px; FONT-FAMILY: Verdana;} </style> </head> <body ng-app = ""> <span> Seleccione una clase: </span> <select ng-model = "home"> <opción valor = "sky"> sky color </sppection> <opción valor = "tomato"> color de tomates </opción> <select> <div ng-class = "home"> <h3> it! </h4> </div> </body> </html>(2) Ng-Class-incluso es similar a la clase Ng, pero solo funciona en líneas uniformes; Ng-class-ODD es similar a la clase Ng, pero solo funciona en líneas impares; Ng-class-ODD es similar a la clase Ng, pero solo funciona en líneas impares;
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <style> .stripedeven {color: blanco; Color de fondo: Cyan;}. StripEdodd {color: blanco; Color de fondo: YellowGreen;} </style> </head> <body ng-app = "myapp"> <table ng-concontroller = "myctrl"> <tr> <th> name </tth> <th> país </th> </tr> <tr ng-depreat = "x en registros" ng-class-even = "Stripedeven’ "ng-class-class-clas-odd" "" "", "StripeDodd" "". <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", function ($ scope) {$ scope.records Futterkiste "," país ":" Alemania "}, {" nombre ":" berglunds snabbk "," país ":" suecia "}, {" nombre ":" Centro comercial moctezuma "," país ":" México "}, {" nombre ":" ernst handel "," país ":" austria "}}}}}}}}}}}}}}}}}}}}}} ]}); </script> </body> </html>(3) ng-if si la condición es falsa eliminar elementos html
ng-if se usa para eliminar elementos HTML cuando la expresión es falsa. Si el resultado de la ejecución de la instrucción IF es verdadera, el elemento eliminado se agregará y se mostrará. ng-if es diferente de ng-hide , ng-hide oculta elementos, mientras que ng-if elimina elementos del DOM.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <body ng-app = "" ng-init = "myvar = true"> <h3> script: <inying type = "type =" chatcheboBax. ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> bienvenido </h1> <p> Bienvenido a mi hogar. </p> <hr> </div> <p> El elemento DIV se elimina cuando la casilla de verificación no está marcada. </p> <p> Cuando la casilla de verificación se vuelve a seleccionar, el elemento div se volverá a mostrar. </p> </body> </html>
(4) Checked Ng especifica si el elemento está seleccionado
La directiva ng-checked se usa para establecer las propiedades verificadas de una casilla de verificación o botón de radio. Si ng-checked devuelve verdaderas, se seleccionará la casilla de verificación o el botón de radio.
<! 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> <put type =" checkbox "ng-model" todo " <input type = "checkbox" ng-checked = "all"> volvo <br> <input type = "checkbox" ng-checked = "all"> ford <br> <input type = "checkbox" ng-checked = "all"> ford <br> <input type = "checkbox" ng checked = "all"> ng checked = "all"> mercedes <h3> click "check" checkbox "ng checked-checked. </h3> </body> </html>
3. Use la animación CSS
Podemos usar la transición CSS o la animación CSS para que los elementos HTML animen.
(1) Transición CSS
La transición de CSS nos permite modificar suavemente un valor de atributo CSS a otro: cuando .ng-hide se establece en el elemento DIV, la transición toma 0,5 segundos y la altura cambia de 100px a 0.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script><style>div { transition: all linear 0.5s; Color de fondo: LightBlue; altura: 100px;}. ng-hide {altura: 0;} </style> </head> <body ng-app = "myapp"> <h1> ocultar div: <input type = "checkbox" ng-model = "mycheck"> </h1> <divide = "mycheck"> </div> <scritch> var = angular.module ('myapp', myapp ', ['nganime']); </script> </body> </html>(2) Animación CSS
La animación CSS le permite modificar suavemente los valores de los atributos CSS: cuando .ng-hide se establece en el elemento div, la animación myChange se ejecutará y cambiará sin problemas la altura de 100px a 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animal.min.js"> </script> <syle>@syswframes my Change } a {altura: 10; }} div {altura: 100px; Color de fondo: LightBlue;} div.ng-hide {animation: 10s mychange;} </style> </head> <body ng-app = "nganiMe"> ocultar div: <input type = "checkbox" ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> </body> </html>Resumir
Lo anterior tiene que ver con la animación de Angularjs. Este artículo lo resume en detalle y proporciona código de ejemplo. Espero que sea útil para todos los que aprenden algunos angulares.