Latest web development tutorials

AngularJS 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.w3big.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">

O que é animação?

A animação é dinâmico efeitos, alterando o elemento HTML produzido.

Exemplos

Marque a caixa de seleção para ocultar DIV:

<Body ng-app = "ngAnimate ">

Esconder DIV: <input type = "checkbox " ng-model = "myCheck">

<Div ng-hide = "myCheck "> </ div>

</ Body>

tente »
nota 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:

Exemplos

<Body ng-app = "myApp ">

<H1> Ocultar DIV: <input type = "checkbox " ng-model = "myCheck"> </ h1>

<Div ng-hide = "myCheck "> </ div>

<Script>
var app = angular.module ( 'myApp' , [ 'ngAnimate']);
</ Script>

tente »

ngAnimate feito?

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)

Usando CSS Animação

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 Transitions

CSS permite uma transição suave para um valor de propriedade CSS alterado para outro:

Exemplos

Nos conjuntos de elementos DIV .ng-hide classe, a transição leva 0,5 segundos, a altura de 100px para 0:

<Style>
div {
transição: tudo linear 0,5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</ Style>

tente »

CSS Animação

animação CSS permite suavizar modificar valores de propriedades CSS:

Exemplos

No elemento DIV define .ng-hide -time classe, myChange animação é executada, será altura suave de 100px para 0:

<Style>
@keyframes myChange {
a partir de {
height: 100px;
} Para {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animação: 0.5s myChange;
}
</ Style>

tente »