AngularJS Animation



  • AngularJS provides much more support for animate the application for better user experience.
  • We can use the transition effects and CSS for animation.
  • To use AngularJS Animation we should include “angular-animate.js” JavaScript source file from googleapis.com.
  • To use AngularJS Animation we should include “angular-animate.js” JavaScript source file from googleapis.com.
  • Angular does not animate the HTML elements directly, we should use instead CSS or JS but Angular Animation Provides Additional support for animation.

Directive Support for Animation:

Directive Animation Support
ng-repeat enter, leave and move
ng-view enter and leave
ng-include enter and leave
ng-switch enter and leave
ng-if enter and leave
ng-class add and remove (the CSS class(es) present)
ng-show add and remove
form & ng-model add and remove (dirty, pristine, valid, invalid & all other validations)
ngMessages add and remove (ng-active & ng-inactive)
ngMessage enter and leave
ng-hide add and remove (the ng-hide class value)

Example Classes for ng-show directive Support for Animation:

  • ng-animate
  • ng-show-animate
  • ng-show-add
  • ng-show-remove
  • ng-show-add-active
  • ng-show-remove-active

Sample code for Animation in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular-animate.min.js"> </script>
        <style>
            h2 {
                border:1px ;
                margin-top:15px;
                padding:15px;
                background:#12AA44;
                -webkit-transition:all linear 0.5s;
                transition:all linear 0.5s;
            }
            h2.bigger {
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <h1>AngularJS Animation Tutorial</h1>
        <div ng-app="aniApp" ng- controller=" aniCtrl">
                <h2 ng-class=" { 'bigger': big}">
                    Click the button to toggle small or big.
                </h2>
                < button ng- click=" big = !big">Set big = {{ big }} </ button>
            </div>
            <script>
                var App = angular.module("aniApp", ['ngAnimate']);
                App. controller ("aniCtrl ", function($scope) {
                    $scope.big = false; 
                });
        </script>
    </body>
</html>

How to include AngularJS Animation Library file:

  • To use AngularJS Animation we should include “angular-animate.js” JavaScript source file from googleapis.com.
<script src="https://ajax.googleapis.com/ajax/libs/
            angularjs/ 1.5.6/angular-animate.min.js"></script>

How to make the Application as AngularJS Animation:

  • ['ngAnimate'] is used to define the application as Animation dependent module.
var App = angular.module("myApp", ['ngAnimate']);

Code Explanation for Animation in AngularJS:

Code Explanation for AngularJS Animation

  1. To use AngularJS Animation we should include “angular-animate.js” JavaScript source file from googleapis.com.
  2. The set of CSS styles for <h2> tag which displays the <h2> tag content in a green box.
  3. The h2.bigger CSS class is used to set the large font size for the <h2> tag.
  4. The ng-class="{ 'bigger' : big}" is used to toggle the bigger CSS class enable or disable.
  5. The button used to enable or disable the CSS by the variable big.
  6. The angular.module used to create an Application module for “aniApp” with ['ngAnimate'] for the application as Animation dependent module.
  7. To initiate the “big” variable as false.

Sample Output for Animation in AngularJS:

    Sample Output1 for AngularJS Animation

  1. Set big button used to toggle the content looks bigger or smaller.

  2. Sample Output2 for AngularJS Animation

  3. When user click the “Set big= false” then that will be changed as “Set big=true” and the font size of <h2> tag content will be increased.



Related Searches to angularjs animation