Latest web development tutorials

AngularJS Animation

AngularJS provides animation, you can use with CSS.

AngularJS animation need to introduce angular-animate.min.js library. 

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

It should be used in the application model ngAnimate: 

<body ng-app="ngAnimate">

What is animation?

Animation is dynamic effects by altering the HTML element produced.

Examples

Select the check box to hide DIV:

<Body ng-app = "ngAnimate ">

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

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

</ Body>

try it"
Note Animation applications not too much, but appropriate use of animation can increase the richness of the page, or you can allow users to more easily understand.

If we apply the name of the application has been set up, you can put ngAnimate added directly in the model:

Examples

<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>

try it"

ngAnimate done?

ngAnimate model can add or remove class.

ngAnimate model does not make animate HTML elements, but ngAnimate will monitor the event, similar to the hidden display HTML elements, if an event occurs ngAnimate will use the predefined class to animate HTML elements.

AngularJS add / remove class instruction:

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

ng-show and ng-hide command for adding or removing ng-hide the value of the class.

Other instructions will be added into the DOM ng-enter class, remove DOM will add ng-leave property.

When the HTML element position changes, ng-repeat command can also add ng-move type.

In addition, after completion, class collection of HTML elements will be removed. For example: ng-hide command will add about class:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (if the element will be hidden)
  • ng-hide-remove (if the element is displayed)
  • ng-hide-add-active (if the element is hidden)
  • ng-hide-remove-active (if the element is displayed)

Using CSS Animation

We can use CSS transition (transition) or CSS animation that animate HTML elements, the part you can see our CSS transition tutorial , CSS animation tutorial .

CSS Transitions

CSS allows us a smooth transition to a CSS property value changed to another:

Examples

In the DIV element sets .ng-hide class, the transition takes 0.5 seconds, the height from 100px to 0:

<Style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</ Style>

try it"

CSS Animation

CSS animation allows you to smooth modify CSS property values:

Examples

In the DIV element sets .ng-hide -time class, myChange animation is executed, it will be smooth height from 100px to 0:

<Style>
@keyframes myChange {
from {
height: 100px;
} To {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</ Style>

try it"