Aplicativos de animação de AngularJS com ngAnimate



Este blog irá explicar como usar o popular ngAnimate para adicionar transições / animações de página a visualizações angulares, ou seja, como criar uma animação usando o ngAnimate

AngularJS é uma estrutura JavaScript superheróica que torna a criação de aplicativos de página única (SPA) muito fácil. Além disso, o AngularJS vem com um punhado de módulos angulares que podem ser usados ​​para criar uma experiência de usuário incrível. Nesta postagem, veremos como usar o popular ngAnimate para adicionar transições / animações de página a visualizações angulares.

ngAnimate pode ser usado com várias diretivas como ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.





Nesta postagem, usaremos animações com ngView

Aqui, estamos usando Brackets IDE da Adobe, mas você está livre para usar outros, por exemplo, Sublime Text, WebStorm da JetBrains etc.



Nota : Também usaremos a API Bootswatch Bootstrap para dar às nossas páginas HTML uma aparência bonita

Estrutura do Projeto:

Abaixo está a estrutura do projeto no IDE de colchetes



ngAnimate-angularjs-project-structure

Aqui está uma breve descrição de cada arquivo usado no projeto

animation.css - arquivo CSS principal onde definimos nossas animações de página

bootstrap.min.css - bootstrap de relógio de botas para dar nosso marca um visual bonito

config.js - arquivo JavaScript principal, onde definimos nosso módulo angular junto com rotas e controladores

shellPage.html - Esta é a página do shell na qual outras visualizações serão carregadas dinamicamente

view1.html, view2.html, view3.html - Estas são as visualizações parciais que serão carregadas na shellPage

como instalar o chef server

Como as animações são aplicadas:

ngAnimate aplica classes CSS a diferentes diretivas angulares, dependendo se estão entrando ou saindo da visualização

.ng-enter - Esta classe CSS se aplica à diretiva sempre que ela é carregada na página

.ng-leave - Esta classe CSS se aplica à diretiva sempre que ela sai da página

Vamos examinar cada arquivo um por um

shellPage.html

shellPage carrega os recursos necessários, aplica ng-app ao corpo e adiciona ng-view para injetar as visualizações dinamicamente.

  

config.js

No arquivo de configuração, definimos nosso módulo angular junto com rotas e controladores.

O módulo transactionApp tem duas dependências: ngAnimate e ngRoute

var transiçãoApp = angular.module ('transactionApp', ['ngAnimate', 'ngRoute']) transiçãoApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controlador: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controlador: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controlador:' view3Controller '})}) transiçãoApp.controller (' view1Controller ', função ($ scope) {$ scope.cssClass =' ​​view1 '}) transactionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transactionApp.controller ('view3Controller', função ($ scope) {$ scope.cssClass = 'view3'})

Definimos três visualizações parciais (view1, view2, view3) que serão injetadas na shellpage dependendo da URL. Os respectivos controladores definem um atributo cssClass, que é o nome da classe CSS, que será aplicado ao ng-view. Vamos definir nossas animações nessas classes CSS que irão carregar cada página com animações diferentes.

Páginas parciais view1.html, view2.html, view3.html

Não há muito em páginas parciais, apenas algum texto e link para outras visualizações

view1.html

Esta é a vista 1

Ver 2 Ver 3

view2.html

Esta é a vista 2

Ver 1 Ver 3

view3.html

Esta é a vista 3

Ver 1 Ver 2

Lembre-se de que esses três arquivos HTML são páginas parciais que serão injetadas em shellPage.html de acordo com a URL que definimos no arquivo config.js.

Definindo Estilos e Animações:

Vamos dar vida aos nossos pontos de vista aplicando CSS a eles

.view {bottom: 0 padding-top: 200px position: absoluto text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { cor: # 333 posição: alinhamento de texto absoluto: topo central: 50px largura: 100%} / * Cores de fundo e de texto para páginas de visualização parcial (visualização1, visualização2, visualização3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

Para fazer uma transição limpa entre as diferentes visualizações, definiremos a propriedade CSS Z-index

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

Agora é hora de definir nossas animações

Animação do slide à esquerda

/ * slide out left * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {para {-webkit-transform: translateX (-100%)}}

Aumentar a escala da animação

/ * 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- keyframes scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}

Deslize para dentro da animação direita

/ * deslize da direita * / @keyframes slideInRight {de {transform: translateX (100%)} para {transform: translateX (0)}} @ -moz-keyframes slideInRight {de {-moz-transform: translateX (100 %)} para {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {de {-webkit-transform: translateX (100%)} para {-webkit-transform: translateX (0)}}

Slide In from Bottom Animation

/ * slide in from the bottom * / @keyframes slideInUp {from {transform: translateY (100%)} to {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} para {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {de {-webkit-transform: translateY (100%)} para {-webkit-transform: translateY (0)}}

Rotate and Fall Animation

/ * girar e cair * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: facilidade- 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: facilidade-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: facilmente out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}

Rotate out Newspaper Animation

/ * rotate out Journal * / @ -webkit-keyframes rotateOutNewspaper {para {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {para {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}

Aplicação de animações:

É hora de aplicar as animações que definimos antes

classificar um array c ++

Ver 1 animações

/ * Visualize 1 animações para sair da página e insira * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s ambos fáceis-em -moz-animation: slideOutLeft 0,5s ambos fáceis animação: slideOutLeft 0,5s ambos fáceis -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s ambos fáceis -moz-animation: scaleUp 0,5s ambos animação fácil: scaleUp 0,5s ambos fáceis}

Ver 2 animações

/ * Visualize 2 animações para sair da página e insira * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s ambos easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s ambos Easy-in transform-origin: 0% 0% animation: rotateFall 1s ambos Easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s ambos Easy-in - moz-animation: slideInRight 0.5s ambos animação atenuada: slideInRight 0.5s ambos atenuados}

Ver 3 animações

/ * Ver 3 animações para sair da página e inserir * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s ambos easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s ambos Easy-in transform-origin: 50% 50% animation: rotateOutNewspaper .5s both Easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s ambos Easy -in -moz-animation: slideInUp 0.5s ambos animação de introdução: slideInUp 0.5s ambos de facilidade}

Concluímos todas as mudanças. Agora é hora de executar o aplicativo

Executando o aplicativo

Ao executar o aplicativo, você verá a página abaixo:

Clique nos links e verá as animações em jogo, ao entrar e sair das páginas parciais.

Existem várias outras animações que podem ser usadas. Além disso, um conjunto impressionante de possíveis efeitos pode estar aqui: http://tympanus.net/Development/PageTransitions/

Baixe o código e experimente você mesmo

[buttonleads form_title = ”Código de download” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Código de download”]

Espero que tenham gostado da animação acima com o blog ngAnimate. Se você deseja se aprofundar no Angular JS, eu recomendo porque não dá uma olhada em nosso página do curso. O treinamento de certificação Angular JS na Edureka tornará você um especialista em Angular JS por meio de sessões conduzidas por instrutor ao vivo e treinamento prático usando casos de uso da vida real.

Tem alguma questão para nós? Mencione isso na seção de comentários e entraremos em contato com você.

Postagens relacionadas:

Analisando arquivos XML usando SAX Parser