AngularJS Animation
AngularJS fornece efeitos de animação que podem ser usados com CSS.
AngularJS usa animações para introduzir a biblioteca angular angular.min.min.js.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript>
Você também precisa usar o modelo Nganimate em seu aplicativo:
<corpo ng-app = "nganimate">
O que é animação?
A animação é um efeito de mudança dinâmica gerado pela alteração de elementos HTML.
Exemplo
Verifique a caixa de seleção para ocultar o div:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> div {transição: todos os 0.5s lineares; Background-Color: LightBlue; Altura: 100px; largura: 100%; Posição: relativa; topo: 0; Esquerda: 0;}. ng-hide {altura: 0; largura: 0; Background-Color: transparente; topo: -200px; Esquerda: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </sCript> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript> </ad Head> <corpo ng-app = "nganimate"> <h1> hide div: <input Type = "CheckBox" ng-model = "Mymcheck"> <H1> Hide: <input Type = "CheckBox" ng-model = " ng-hide = "mycheck"> </div> </body> </html>Efeito de corrida:
Nota: Não deve haver muitas animações no aplicativo, mas o uso apropriado de animações pode aumentar a riqueza da página e facilitar a compreensão dos usuários.
Se nosso aplicativo já definiu o nome do aplicativo, podemos adicionar o Nganimate diretamente ao modelo:
Exemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> div {transição: todos os 0.5s lineares; Background-Color: LightBlue; Altura: 100px; largura: 100%; Posição: relativa; topo: 0; Esquerda: 0;}. ng-hide {altura: 0; largura: 0; Background-Color: transparente; topo: -200px; Esquerda: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </sCript> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript> </ad Head> <corpo ng-app = "myApp"> <h1> hide div: <input Type = "CheckBox" ng-model = MyApchck "> <h1> ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']);Efeito de corrida:
O que o Nganimate fez?
O modelo Nganimate pode adicionar ou remover a classe.
O modelo Nganimate não pode animar os elementos HTML, mas o Nganimate monitorará os eventos, semelhante ao esconder e exibir elementos HTML. Se ocorrer um evento, o Nganimate usará uma classe predefinida para animar os elementos HTML.
Diretiva AngularJS para adicionar/remover classe:
ng-show
ng-hide
NG-Class
ng-view
ng-inclusão
ng-repeat
ng-if
ng-switch
As diretivas NG-Show e Ng-Hide são usadas para adicionar ou remover o valor da classe NG-Hide.
Outras diretrizes adicionarão a classe NG-Enter ao entrar no DOM e removerá o DOM adicionará a propriedade NG-LEAVE.
Quando a posição do elemento HTML muda, a diretiva NG-REPEAT também pode adicionar a classe NG-move.
Além disso, após a conclusão da animação, a coleção de classes de elementos HTML será removida. Por exemplo: a diretiva NG-HIDE adicionará a seguinte classe:
Ng-Animado
Ng-Hide-Animate
ng-hide-add (se o elemento estiver oculto)
NG-Hide-Remove (se o elemento for exibido)
ng-hide-add-atacto (se o elemento estiver oculto)
Ng-Hide-Remove ativo (se o elemento for exibido)
Usando a animação CSS
Podemos usar a transição CSS ou a animação CSS para tornar os elementos HTML animados. Você pode consultar o nosso tutorial de transição CSS e o tutorial de animação CSS.
Transição CSS
A transição CSS nos permite modificar suavemente um valor de atributo CSS para outro:
Exemplo
Quando o elemento div tem o conjunto de classe .ng-hide, a transição leva 0,5 segundos e a altura muda de 100px para 0:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yoy> div {transição: todos os 0.5s lineares; Background-Color: LightBlue; Altura: 100px;}. ng-hide {Hight: 0;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.4.6/angular.min.js"> </script> <sCript> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript> </ad Head> <corpo ng-app = "myApp"> <h1> hide div: <input Type = "CheckBox" ng-model = MyApchck "> <h1> ng-hide = "mycheck"> </div> <cript> var app = angular.module ('myApp', ['nganimate']);Animação CSS
A animação CSS permite modificar suavemente os valores da propriedade CSS:
Exemplo
Quando a classe .ng-hide for definida no elemento Div, a animação de mychange será executada, o que mudará suavemente a altura de 100px para 0:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <yley> @keyframes mychange {de {altura: 100px; } para {altura: 0; }} div {altura: 100px; Background-Color: LightBlue;} div.ng-hide {Animação: 0.5S MyChange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </sCript> </ad Head> <corpo ng-app = "nganimate"> hide div: <input type = "caixa de seleção" ng-model = "mycheck"> ng-hide = "mycheck"> </div> </body> </html>O exposto acima é uma coleção de informações sobre as angulares angulares. Por favor, consulte, se precisar.