Animación AngularJS
AngularJS proporciona efectos de animación que se pueden usar con CSS.
AngularJS utiliza animaciones para introducir la biblioteca Angular-Animate.min.js.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
También debe usar el modelo Nganime en su aplicación:
<Body Ng-App = "NganiMe">
¿Qué es la animación?
La animación es un efecto de cambio dinámico generado al cambiar los elementos HTML.
Ejemplo
Marque la casilla de verificación para ocultar Div:
<! 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </fead> <body ng-app = "nganime"> <h1> hide div: <type de entrada = "casilla de verificación" ng-model = "mycheck"> </h1> <divitsi ng-hide = "mycheck"> </div> </body> </html>Efecto de ejecución:
Nota: No debe haber demasiadas animaciones en la aplicación, pero el uso apropiado de animaciones puede aumentar la riqueza de la página y facilitar la comprensión de los usuarios.
Si nuestra aplicación ya ha establecido el nombre de la aplicación, podemos agregar Nganime directamente al modelo:
Ejemplo
<! 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 = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <cuerpo ng-app = "myapp"> <h1> esconder: <py type = "checkbox" ng-model = "mycheck"> </h1> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganiMe']); </script> </body> </html>Efecto de ejecución:
¿Qué hizo Nganate?
El modelo Nganimed puede agregar o eliminar la clase.
El modelo nganimado no puede animar elementos HTML, pero Nganimate monitoreará eventos, similar a ocultar y mostrar elementos HTML. Si se produce un evento, Nganate usará una clase predefinida para animar elementos HTML.
Directiva AngularJS para agregar/eliminar la clase:
show de ng
escondido
de clase ng
visión ng
ng-include
ng-reput
NG-IF
interruptor
Las directivas NG-Show y Ng Hide se utilizan para agregar o eliminar el valor de la clase Ng Hide.
Otras directivas agregarán la clase NG-Enter al ingresar al DOM, y eliminar el DOM agregará la propiedad NG-LEAVE.
Cuando cambia la posición del elemento HTML, la directiva NG-Repeat también puede agregar la clase NG-MOVE.
Además, después de que se complete la animación, se eliminará la colección de clases de elementos HTML. Por ejemplo: la Directiva NG Hide agregará la siguiente clase:
ng-animado
ng escondido
ng-hide-add (si el elemento estará oculto)
Ng-Hide-Remove (si se mostrará el elemento)
ng-hide-add-active (si el elemento estará oculto)
Ng-Hide-Remove-Active (si se mostrará el elemento)
Usando la animación CSS
Podemos usar la transición CSS o la animación CSS para que los elementos HTML animen. Puede consultar nuestro Tutorial de Transición CSS y Tutorial de Animación CSS.
Transición CSS
La transición CSS nos permite modificar suavemente un valor de atributo CSS a otro:
Ejemplo
Cuando el elemento DIV tiene el conjunto de clase .ng de corte, la transición toma 0.5 segundos y la altura cambia de 100px a 0:
<! DocType html> <html> <head> <meta charset = "utf-8"> <style> div {transición: todos lineal 0.5s; Color de fondo: LightBlue; altura: 100px;}. ng-hide {altura: 0;} </ystye> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script <script <script <script> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <cuerpo ng-app = "myapp"> <h1> esconder: <py type = "checkbox" ng-model = "mycheck"> </h1> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myApp', ['nganiMe']); </script> </body> </html>Animación CSS
CSS Animation le permite modificar suavemente los valores de propiedad de CSS:
Ejemplo
Cuando la clase .ng de escondite se establece en el elemento div, se ejecutará la animación mychange, que cambiará sin problemas la altura de 100px a 0:
<! DocType html> <html> <head> <meta charset = "utf-8"> <syle> @Keyframes myChange {desde {altura: 100px; } a {altura: 0; }} div {altura: 100px; Color de fondo: 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> <scry src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> ocultar: <input type = "checkbox" ng-model = "mycheck"> <Diven ng-hide = "mycheck"> </div> </body> </html>Lo anterior es una recopilación de información sobre AngularJS Animations. Consultelo si lo necesita.