AngularJS - SPLessons

AngularJS Animations

Chapter 27

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Animations

AngularJS Animations

shape Description

The occurrence object’s motion due to the transformation of HTML element is known as Animation. It is not required that AngularJS applications fully comprised of animations, but those animations should make the user to understand about the application easily.

Step-1 : In order to use AngularJs Animations in applications, include the AngularJS Animate library, which looks like below.

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js”></script>

Step-2 : The module ngAnimate has to be binded to ng-app directive or if the application is given a name, add ngAnimate as a dependency in the application module.

shape Example

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
  </head>

  <body ng-app="spApp">
    <h3>Click on below checkbox to see the animation effect </h3>
    <input type="checkbox" ng-model="spCheck" />
    <div ng-hide="spCheck"></div>
    <script>
      var app = angular.module('spApp', ['ngAnimate']);
    </script>
  </body>

</html>

style.css

/* Styles go here */

div {
  transition: all linear 0.5s;
  background-color: lightpink;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

Output:

ngAnimate Functionality

shape Description

AngularJS do not create animation by animating HTML elements. The pre-defined classes are added and removed by ngAnimate module.

AngularJS directives that are add/remove classes are:


All the above directives are discussed in AngularJS HTML DOM chapter.

During Animation in AngularJS, a set of class values are present in HTML element, which are then be cleared when the animation is completed. Example: the ng-hide directive will add these class values:

Summary

shape Key Points

  • The motion of objects due to the transformation of HTML element is known as Animation.
  • To add animation to the AngularJS Application, you should add ngAnimate module to ng-App directive.