O melhor tutorial AngularJS Animação em 2024. Neste tutorial você pode aprender O que é animação?,ngAnimate feito?,Usando CSS Animação,CSS Transitions,CSS Animação,
AngularJS fornece animação, você pode usar com CSS.
AngularJS animação necessidade de introduzir biblioteca angular-animate.min.js.
<script src="http://cdn.static.w3write.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
Deve ser utilizado no modelo de aplicação ngAnimate:
<body ng-app="ngAnimate">
A animação é dinâmico efeitos, alterando o elemento HTML produzido.
Marque a caixa de seleção para ocultar DIV:
aplicações de animação não muito, mas o uso apropriado de animação pode aumentar a riqueza da página, ou você pode permitir que os usuários a compreender mais facilmente. |
Se aplicarmos o nome do aplicativo foi criado, você pode colocar ngAnimate adicionado diretamente no modelo:
modelo ngAnimate pode adicionar ou remover classe.
modelo ngAnimate não faz elementos animados HTML, mas ngAnimate irá acompanhar o evento, similar aos elementos de exibição HTML ocultos, se ocorrer um evento ngAnimate usará a classe pré-definida para animar elementos HTML.
AngularJS adicionar / remover a instrução de classe:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show
e ng-hide
comando para adicionar ou remover ng-hide
o valor da classe.
será adicionado no DOM outras instruções ng-enter
classe, remover DOM irá adicionar ng-leave
propriedade.
Quando o HTML mudanças de posição elemento, ng-repeat
comando também pode adicionar ng-move
tipo.
Além disso, após a conclusão, recolha classe de elementos HTML será removido. Por exemplo: ng-hide
comando irá adicionar cerca de classe:
ng-animate
ng-hide-animate
ng-hide-add
(se o elemento será oculto) ng-hide-remove
(se o elemento é exibido) ng-hide-add-active
(se o elemento está escondido) ng-hide-remove-active
(se o elemento é exibido) Podemos usar transição CSS (de transição) ou animação CSS que animam elementos HTML, a parte que você pode ver o nosso tutorial de transição CSS , animação CSS tutorial .
CSS permite uma transição suave para um valor de propriedade CSS alterado para outro:
Nos conjuntos de elementos DIV .ng-hide
classe, a transição leva 0,5 segundos, a altura de 100px para 0:
animação CSS permite suavizar modificar valores de propriedades CSS:
No elemento DIV define .ng-hide
-time classe, myChange
animação é executada, será altura suave de 100px para 0: