Latest web development tutorials

AngularJS Animations

AngularJS fournit l'animation, vous pouvez utiliser avec CSS.

AngularJS animation besoin d'introduire la bibliothèque angulaire animate.min.js. 

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Il devrait être utilisé dans le modèle d'application ngAnimate: 

<body ng-app="ngAnimate">

Qu'est-ce que l'animation?

L'animation est des effets dynamiques en modifiant l'élément HTML produit.

Exemples

Activez la case à cocher pour masquer DIV:

<Body ng-app = "ngAnimate ">

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

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

</ Body>

Essayez »
note applications d'animation pas trop, mais l'utilisation appropriée de l'animation peuvent augmenter la richesse de la page, ou vous pouvez permettre aux utilisateurs de comprendre plus facilement.

Si nous appliquons le nom de l'application a été mis en place, vous pouvez mettre ngAnimate ajouté directement dans le modèle:

Exemples

<Body ng-app = "myApp ">

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

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

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

Essayez »

ngAnimate fait?

modèle ngAnimate peut ajouter ou supprimer la classe.

modèle ngAnimate ne fait pas d'éléments animés HTML, mais ngAnimate suivra l'événement, similaire aux éléments d'affichage HTML cachés, si un événement se produit ngAnimate utilisera la classe prédéfinie pour animer des éléments HTML.

AngularJS ajouter / supprimer l'instruction de classe:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show et ng-hide commande pour ajouter ou supprimer ng-hide la valeur de la classe.

D' autres instructions seront ajoutés dans les DOM ng-enter classe, supprimer DOM ajoutera ng-leave la propriété.

Lorsque les HTML changements de position de l' élément, ng-repeat commande peuvent également ajouter ng-move de type.

En outre, après l'achèvement, la collecte de la classe des éléments HTML seront supprimés. Par exemple: ng-hide commande ajoutera environ classe:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (si l'élément sera caché)
  • ng-hide-remove (si l'élément est affiché)
  • ng-hide-add-active (si l'élément est caché)
  • ng-hide-remove-active (si l'élément est affiché)

L'utilisation de CSS Animations

Nous pouvons utiliser la transition CSS (de transition) ou une animation CSS qui animent les éléments HTML, la partie que vous pouvez voir notre transition tutoriel CSS , animation CSS tutoriel .

CSS Transitions

CSS nous permet une transition en douceur à une valeur de la propriété CSS changé à l'autre:

Exemples

Dans les ensembles d'éléments de DIV .ng-hide classe, la transition prend 0,5 secondes, la hauteur de 100px à 0:

<Style>
div {
transition: toutes linéaires 0.5s;
background-color: lightblue;
hauteur: 100px;
}
.ng-hide {
hauteur: 0;
}
</ Style>

Essayez »

CSS Animations

animation CSS vous permet de lisser modifier les valeurs de propriété CSS:

Exemples

Dans l'élément DIV définit .ng-hide -time classe, myChange animation est exécutée, elle sera la hauteur en douceur de 100px à 0:

<Style>
@keyframes myChange {
à partir de {
hauteur: 100px;
} Pour {
hauteur: 0;
}
}
div {
hauteur: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</ Style>

Essayez »