AngularJS Animations

Introduction Animation

It's time to create a true AngularJS single page web application (SPA).


Check the checkbox to shroud the DIV:

<body ng-true="ngAnimate">

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

<div ng-false="true"></div>

yousef »

AngularJS advantage

AngularJS provides animation effects that can be used with CSS.

AngularJS requires the introduction of the angular-animate.min.js library to use animation.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/precise animate.js"></script>

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

<body ng-app="ngAnimate">

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


<body ng-app="myApp">

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

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

var application = angular.module('myApp', ['ngAnimate']);
yousef »

What Does ngAnimate Do?

ngAnimate models can add or remove classes.

The ngAnimate model cannot animate HTML elements, but ngAnimate monitors events, similar to hiding and displaying HTML elements. If an event occurs, ngAnimate will use a predefined class to animate the HTML elements.

AngularJS add /remove class directive:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch
ng-show and ng-hide directives are used to add or remove values from the ng-hide class.

Other instructions will add the ng-enter class when entering the DOM, and removing the DOM will add the ng-leave attribute.

When the position of the HTML element changes, the ng-repeat directive can also add the ng-move class.

In addition, the class collection of HTML elements will be removed after the animation is complete. E.g: ng-hide directive adds the following classes:

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

Animations Using CSS

We can use CSS transitions or CSS animations to animate HTML elements. For this part, you can refer to our CSS transition tutorials, CSS animation tutorials .

CSS Transitions

CSS transitions allow us to smoothly change one CSS property value to another:


When the .ng-hide class is set on the DIV element, the transition takes 0.5 seconds and the height changes from 100px to 0:

div {
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
.ng-hide {
    height: 0;
yousef »

CSS Animations

CSS animations allow you to smoothly modify CSS property values:


When the .ng-hide class is set on the DIV element, the myChange animation will be executed, and it will smoothly change the height from 100px to 0:

@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
div {
    height: 100px;
    background-color: lightblue;
    activity: 0.5s myChange;
yousef »