AngularJS es un marco de JavaScript superheroico que facilita la creación de aplicaciones de página única (SPA). Además de eso, AngularJS viene con un puñado de módulos angulares que se pueden usar para crear una experiencia de usuario increíble. En esta publicación, veremos cómo usar ngAnimate popular para agregar transiciones / animaciones de página a vistas angulares.
ngAnimate se puede usar con varias directivas como ngRepeat, ngView, ngInclude, ngIf, ngMessage, etc.
En esta publicación usaremos animaciones con ngView
Aquí estamos usando Brackets IDE de Adobe, pero puede usar otros, por ejemplo, Sublime Text, WebStorm de JetBrains, etc.
Nota : También usaremos Bootswatch Bootstrap API para darle a nuestras páginas HTML un aspecto hermoso
Estructura del proyecto :
A continuación se muestra la estructura del proyecto en Brackets IDE
Aquí está la breve descripción de cada archivo utilizado en el proyecto
animation.css - archivo CSS principal donde definimos nuestras animaciones de página
bootstrap.min.css - bootstrap bootswatch para dar nuestro etiquetas una mirada hermosa
config.js - archivo JavaScript principal donde definimos nuestro módulo angular junto con rutas y controladores
shellPage.html - Esta es la página de shell en la que se cargarán dinámicamente otras vistas.
view1.html, view2.html, view3.html - Estas son las vistas parciales que se cargarán en el shellPage
¿Cómo se aplican las animaciones?
ngAnimate aplica clases CSS a diferentes directivas angulares dependiendo de si están entrando o saliendo de la vista
.ng-enter - Esta clase CSS se aplica a la directiva cada vez que se carga en la página.
¿Qué es el modelo de programación basado en pojo?
.ng-dejar - Esta clase CSS se aplica a la directiva cada vez que sale de la página.
Repasemos cada archivo uno por uno
shellPage.html
shellPage carga los recursos necesarios, aplica ng-app al cuerpo y agrega ng-view para inyectar las vistas de forma dinámica.
config.js
En el archivo de configuración, definimos nuestro módulo angular junto con rutas y controladores.
La aplicación de transición del módulo tiene dos dependencias: ngAnimate y ngRoute
var transiciónApp = angular.module ('transiciónApp', ['ngAnimate', 'ngRoute']) transiciónApp.config (función ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controlador: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controlador:' view3Controller '})}) transiciónApp.controller (' view1Controller ', función ($ alcance) {$ alcance.cssClass =' vista1 '}) transiciónApp.controller (' vista2Controller ', función ($ alcance) { $ scope.cssClass = 'view2'}) transiciónApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})Hemos definido tres vistas parciales (vista1, vista2, vista3) que se inyectarán en la página de shell según la URL. Controladores respectivos establece un atributo cssClass, que es el nombre de la clase CSS, que se aplicará a la vista ng. Definiremos nuestras animaciones en estas clases CSS que cargarán cada página con diferentes animaciones.
Páginas parciales view1.html, view2.html, view3.html
No hay mucho en páginas parciales, solo texto y enlaces a otras vistas.
view1.html
Esta es la Vista 1
Vista 2 Vista 3
view2.html
Esta es la Vista 2
Ver 1 Vista 3
view3.html
Esta es la Vista 3
Ver 1 Vista 2
Recuerde que estos tres archivos HTML son páginas parciales que se inyectarán en shellPage.html según la URL que hemos definido en el archivo config.js
Definición de estilos y animaciones:
Démosle vida a nuestras opiniones aplicándoles CSS
.view {bottom: 0 padding-top: 200px position: absoluta text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { color: # 333 posición: absoluta alineación de texto: centro superior: 50px ancho: 100%} / * Colores de fondo y texto para páginas de vista parcial (vista1, vista2, vista3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Para hacer una transición limpia entre diferentes vistas, estableceremos la propiedad de índice z de CSS
.view.ng-leave {índice-z: 9999} .view.ng-enter {índice-z: 8888}Ahora es el momento de definir nuestras animaciones
Animación de diapositiva izquierda
/ * deslizar hacia la izquierda * / @keyframes slideOutLeft {a {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {a {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Animación a escala
/ * scale up * / @keyframes scaleUp {from {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- fotogramas clave scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}Deslizar desde la animación derecha
/ * deslice desde la derecha * / @keyframes slideInRight {de {transform: translateX (100%)} a {transform: translateX (0)}} @ -moz-keyframes slideInRight {de {-moz-transform: translateX (100 %)} a {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {de {-webkit-transform: translateX (100%)} a {-webkit-transform: translateX (0)}}Deslizar desde la parte inferior de la animación
/ * desliza desde abajo * / @keyframes slideInUp {de {transform: translateY (100%)} a {transform: translateY (0)}} @ -moz-keyframes slideInUp {de {-moz-transform: translateY (100 %)} a {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {de {-webkit-transform: translateY (100%)} a {-webkit-transform: translateY (0)}}Animación de rotación y caída
/ * rotar y caer * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: facilitar- out} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-timing-function: easy-out} 40% {-moz-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {transform: rotateZ (10deg) animation-timing-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Girar animación de periódico
/ * rotar periódico * / @ -webkit-keyframes rotateOutNewspaper {a {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {a {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Aplicar animaciones:
Es hora de aplicar las animaciones que habíamos definido antes
Ver 1 animaciones
/ * Ver 1 animaciones para salir de la página e ingresar * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s ambos facilidad-en -moz-animation: slideOutLeft 0.5s ambos animación fácil: slideOutLeft 0.5s ambos facilidad -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s ambos facilidad-en -moz-animation: scaleUp 0.5s ambos animación fácil: scaleUp 0.5s ambos facilidad-in}Ver 2 animaciones
/ * Ver 2 animaciones para salir de la página e ingresar * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s ambos facilidad-en -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s ambos facilidad de entrada transform-origin: 0% 0% animación: rotateFall 1s ambos facilidad de entrada} .view2.ng-enter {-webkit-animation: slideInRight 0.5s ambos facilidad de entrada - moz-animation: slideInRight 0.5s ambos de fácil entrada animación: slideInRight 0.5s ambos de fácil entrada}Ver 3 animaciones
/ * Ver 3 animaciones para salir de la página e ingresar * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s ambos facilidad-en -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s ambos con facilidad transform-origin: 50% 50% animación: rotateOutNewspaper .5s ambos con facilidad} .view3.ng-enter {-webkit-animation: slideInUp 0.5s ambos con facilidad -in -moz-animation: slideInUp 0.5s ambos de fácil entrada animación: slideInUp 0.5s ambos de fácil entrada}Hemos terminado con todos los cambios. Ahora es el momento de ejecutar la aplicación
Ejecutando la aplicación
Al ejecutar la aplicación, se le presentará la siguiente página:
Haga clic en los enlaces y verá animaciones en juego, al entrar y salir de las páginas parciales.
Hay varias otras animaciones que se pueden utilizar. Además, aquí puede haber un abrumador conjunto de posibles efectos: http://tympanus.net/Development/PageTransitions/
Descarga el código y pruébalo tú mismo
[buttonleads form_title = ”Código de descarga” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Código de descarga”]
Espero que les haya gustado la animación anterior con el blog ngAnimate. Si desea profundizar en Angular JS, le recomendaría por qué no eche un vistazo a nuestra página del curso. La capacitación de certificación Angular JS en Edureka lo convertirá en un experto en Angular JS a través de sesiones dirigidas por un instructor en vivo y capacitación práctica utilizando casos de uso de la vida real.
Tienes una pregunta para nosotros? Menciónalo en la sección de comentarios y nos comunicaremos contigo.
Artículos Relacionados:
ordenar matriz c ++ ascendente
Analizar archivos XML con SAX Parser