Implementar efectos de animación de JavaScript en aplicaciones AngularJS
AngularJS es un conjunto rico de marcos para crear aplicaciones web de una sola página, que trae todas las funciones requeridas para crear aplicaciones ricas e interactivas. Una de las características principales es que Angular aporta soporte para la animación.
Podemos usar animaciones en algunos de los contenidos de la aplicación para mostrar que están sucediendo algunos cambios. En mi último artículo, hablé sobre el soporte de animaciones CSS en aplicaciones angulares. En este artículo, veremos cómo usar scripts de JavaScript para generar efectos de animación en aplicaciones AngularJS.
En Angular, la única diferencia entre CSS y JavaScript es su definición. No hay diferencia que evite que se use la animación definida. Primero, necesitamos cargar el módulo nganimado en el módulo raíz de nuestra aplicación.
angular.module ('CoursesApp', ['nganime']);
Todos los eventos de animación de JavaScript que se procesarán permanecen sin cambios. Aquí hay una lista de animaciones directamente compatibles y sus diferentes comportamientos correspondientes:
Conjunto de eventos de instrucción
visión ng
ng-include
interruptor
ng-if entrar
Dejar
ng-repeat enter
Dejar
mover
show de ng
escondido
Añadir a clase ng
Eliminar
La lista anterior es la misma que en el artículo anterior, pero no menciona las clases CSS correspondientes porque no necesitamos usarlas para definir animaciones de JavaScript. Todos estos eventos solo ocurrirán después de que el módulo de aplicación haya cargado el módulo Nganim. Ahora veamos cómo hacer que estas instrucciones se muevan.
Sintaxis para animaciones angulares personalizadas
Aquí hay un marco básico para animaciones de JavaScript personalizadas:
angular.module ('cursesapp'). animation ('. name-of-animation', function (<inyectable>) {return {event: function (elem, ded) {// lógica de animación ded ();}};});Aquí hay algunos puntos clave para recordar al escribir animaciones de JavaScript en AngularJS:
1. El nombre de la animación comienza con un punto (.)
2. Todos los comportamientos de animación aceptan dos parámetros:
• Un objeto en el elemento DOM que está a punto de ejecutar la animación es un objeto jqlite que se cargó antes de cargar AngularJS o un objeto jQuery.
• Una función de devolución de llamada al final de una animación. La acción correspondiente a la instrucción se detiene hasta que se llama a la función de devolución de llamada.
Tenemos varias bibliotecas de JavaScript, como JQuery, Greensock, Anima y varias otras bibliotecas que facilitan la escritura de animaciones. Para mantenerlo simple, estoy usando jQuery para crear animaciones en esta publicación. Para aprender varias otras bibliotecas, puede visitar sus sitios web correspondientes.
Deje que Ng-View se mueva
La animación utilizada en una directiva NG-View se ejecuta al cambiar de vista de aplicaciones AngularJS.
Aquí está el efecto visual causado por una animación cuando aparece una vista:
CourseAppanImations.Animation ('. View-Slide-In', function () {return {Enter: function (element, done) {element.css ({opacidad: 0.5, posición: "relativa", top: "10px", izquierda: "20px"}) .animate ({top: 0, izquierda: 0, 1}, 1000, ded);};};};};Lo anterior crea un efecto deslizante cuando una vista ingresa a la pantalla. El método hecho se pasa como una función de devolución de llamada. Esto es para mostrar que la animación ha terminado y ahora el marco AngularJS puede continuar con la próxima acción.
Tenga en cuenta el método donde se llama el método animate (). No tenemos que convertir este elemento en un objeto jQuery, porque jQuery ya está cargado antes de cargar angularjs.
Ahora necesitamos aplicar este efecto de animación a la Directiva NG-View. Aunque esta animación se define en JavaScript, utilizamos una etiqueta de clase para aplicarla a la Directiva de destino según lo acordado.
Animación Ng-Repeat
Entre las instrucciones que puede elegir usar, Ng-Repeat es un comando muy importante. Hay otras dos instrucciones de operación básicas: filtrado y clasificación. Agregue, mueva o elimine las instrucciones correspondientes de acuerdo con las acciones realizadas.
A continuación se demuestra el uso de algunas animaciones básicas, y cuando ocurren cambios, puede ver los efectos de animación correspondientes.
CourseAppanImations.Animation ('. Repet -animation', function () {return {Enter: function (element, done) {console.log ("Entering ..."); var width = element.width (); element.css ({posición: 'relativo', izquierda: -10, opacidad: 0}); element.animate ({izquierda: 0, opacidad: 1},},},},};};}; function (element, done) {element.css ({posición: 'relativo', izquierda: 0, opacidad: 1}); hecho); } };});Animación de escondidas
La directiva de Hide Ng se usa para agregar o eliminar la clase de estilo Ng Hide del elemento de destino. Para usar una animación, a menudo necesitamos agregar o eliminar los estilos CSS. Pase el nombre de clase a la clase de procesamiento de animación para lograr este efecto. Esto nos permite verificar esta clase y hacer modificaciones apropiadas en el código.
El siguiente es un código de muestra de animación, que utiliza la directiva NG Hide para lograr el efecto de visualización gradual y gradual de los elementos:
CourseAppanImations.Animation ('. Hide-Animation', function () {return {beforeAdDClass: function (elemento, classname, done) {if (classname === 'ng-hide') {element.animate ({opacity: 0}, 500, ded);} else {do ();}}, removeclass: function (elemento, classname, do); (classname === 'ng-hide') {element.css ('opacidad', 0);Deje que los comandos personalizados se muevan
Para hacer que las directivas personalizadas animen, necesitamos usar el servicio $ animado. Aunque el servicio $ animado es parte del marco central de AngularJS, se requiere que Nganiate se cargue antes de que este servicio pueda desempeñar su mayor papel.
Usando el mismo ejemplo del artículo anterior, presentaremos una lista de cursos de una página. Creamos un comando para mostrar los detalles del curso en la cuadrícula, y el contenido de la cuadrícula cambiará al hacer clic en el enlace "Ver estadísticas". Agreguemos una animación para presentar este efecto de conversión al usuario.
Cuando comience la animación de transformación, agregaremos una etiqueta de clase CSS y, al final, eliminaremos esta etiqueta de clase. Aquí está el código de muestra para esta directiva:
app.directive ('cursedetails', function ($ animate) {return {scope: true, templateUrl: 'cursedetails.html', link: function (scope, elem, attrs) {scope.viewDetails = true; elem.find ('botón'). bind ('click', function () {$ animate.addclass (elem.find ('botón'). ()Como puede ver, realizamos esta acción al final de la animación. En las herramientas del desarrollador del navegador, cuando observamos los elementos de la directiva, encontraremos que las dos etiquetas de clase, activas y conmutadores de conmutación, se están agregando rápidamente y luego se eliminan. Podemos ver los efectos de la animación definiendo un estilo de conversión CSS o una animación JavaScript personalizada. Aquí hay un estilo de conversión CSS simple que se puede utilizar para las instrucciones mencionadas anteriormente. Para simplificar, eliminamos prefijos específicos:
.det-anim.switching {transición: todos 1s lineal; Posición: relativo; Opacidad: 0.5; Izquierda: -20px;}O, aquí hay una animación escrita por jQuery que puede usarse para la misma instrucción:
CourseAppanImations.Animation ('. JS-Anim', function () {return {beforeAdDClass: function (element, classname, done) {if (className === 'switching') {element.animate ({opacity: 0}, 1000, function () {element.csss ({opacity: 1}); ded }}}});En estas animaciones, si se puede aplicar a las instrucciones incorporadas, también se puede aplicar a instrucciones personalizadas:
<Div Course-Details>/Div>
Puede ver los efectos de todas las animaciones anteriores que se ejecutan en la página de ejemplo.
en conclusión
La animación, cuando sea adecuada y se usa correctamente, traerá ira a la aplicación. Como hemos visto, AngularJS proporciona varios soporte para las animaciones de CSS y JavaScript. Puede elegir uno de ellos según la situación del equipo.
Sin embargo, el uso de demasiada animación ralentizará la aplicación, lo que hará que la aplicación parezca sin humana para los usuarios. Por lo tanto, debes tener cuidado y optimizar para usar este arma.