AngularJS Animations

Animations are fancy movements and affects added to HTML elements in order to enhance visual appeal of the application. Usually JavaScript, JQuery and JQuery UI libraries are used to add animations to webpages. CSS3 also contains built-in animation capabilities. However, this article focuses on AngularJS Animations.

Before you could use AngularJS Animations, you have to perform following steps.

  • Add a reference to angular-animate.js libarary located at google CDN. The link to the library is “http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js”
  • Add the “ngAnimate” directive to the body of your application. In case if you have a named application, you can add this directive as dependency to the module.
  • Finally, use animations functions to perform different animations.

Take a look at the following example to see how AngularJS animations work.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    
    <style>
    
        .circle-div {
          border: 1px solid black;
            width: 200px;
            height: 200px;
            border-radius: 100%;
            background: pink;
          margin-top: 10px;
          padding: 10px;
        }

        .sample-transition {
          transition: all linear 1.0s;
        }
        .sample-transition.ng-hide {
          opacity: 0;
        }

    </style>
    
</head>
<body ng-app="ngAnimate">
    
<div ng-init="checked = true">
  <p>
    <input type="checkbox" ng-model="checked" />
    Circle Visible?
  </p>
  <div class="circle-div sample-transition" ng-show="checked">
   
  </div>
</div>


</body>
</html>

Download the code Try the code

Take a careful look at the code in the above example. Here we have a check box with an application variable of “checked” bound to it via ng-model. This is variable is initialized to true via “ng-init” in the grid. The code also contains a circular grid of pink color. The circular div has two classes “circle-div and sample-transition. Also, the div contains “ng-show” function which contains value of application variable “checked” (true by default)

Now open the webpage, the checkbox is checked by default and pink circle should be visible on the screen. Now, when user unchecks the checkbox, the value of checked variable becomes false. This means that value of the ng-show animation function also becomes false which actually calls the ng-hide animation function. What ng-hide does is that it looks for the selector that has ng-hide animation added to it. This selector or class is invoked. For instance in our case we have a “sample-transition.ng-hide” selector. When the ng-hide is called, this selector is invoked and it sets the opacity of the div “0” which actually hides the div. Since this is an animation function therefore, the transition: all linear property is also called. We have set the animation time to 1 seconds.

Therefore, when you uncheck the checkbox, the pink circle fades out in 1 seconds time.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .