AngularJS animation

AngularJS provides animation effects that work with CSS.

AngularJS uses animation to introduce the angular-animate.min .js library. 

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js" rel="external nofollow" ></script>

You also need to use the model ngAnimate in your app: 

<body ng-app="ngAnimate">

What is animation?

Animations are dynamic effects that are generated by changing HTML elements.

Instance

Check the box to hide DIV:

< body ng-app= "ngAnimate" >

Hide DIV: slt; input type s "checkbox" ng-model s "myCheck" >

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

< /body >

Try it out . . .
AngularJS animation There shouldn't be too many animations in your app, but using them appropriately can increase the richness of your pages or make them easier for users to understand.

If our app already has an app name set, we can add ngAnimate directly to the model:

Instance

< body ng-app= "myApp" >

< h1 and hide DIV: slt; input type s "checkbox" ng-model s "myCheck" sgt; slt; /h1 >

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

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

Try it out . . .

What did ngAnimate do?

The ngAnimate model can add or remove class.

The ngAnimate model does not animate HTML elements, but ngAnimate monitors events, similar to hiding HTML elements, and uses a predefined class to animate HTML elements if they occur.

Instructions for AngularJS to add/remove class:

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

ng-show and ng-hide are used to add or remove ng-hide class.

Other instructions add the ng-enter class when they enter the DOM, and removing the DOM adds ng-leave property.

The ng-repeat instruction can also ng-repeat class when the ng-move

In addition, when the animation is complete, the class collection of HTML elements is removed. For example: ng-hide instruction adds a class:

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

Use CSS animation

We can use CSS transition or CSS animation to animate HTML elements, as you can see in our CSS transition tutorial, CSS Animation Tutorial.

CSS transition

The CSS transition allows us to smoothly modify one CSS property value to another:

Instance

When the DIV element sets .ng-hide the transition takes 0.5 seconds and the height changes from 100px to 0:

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

Try it out . . .

CSS animation

CSS animation allows you to smoothly modify CSS property values:

Instance

When the DIV element sets .ng-hide myChange animation executes and smooths the 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 out . . .