AngularJS Animations

Last Updated : 06 Sep, 2022

To create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect of Javascript and CSS. Using this sample code, the demonstration of hiding the division/section is shown up by checking the checkbox.

Steps to bring Animation using AngularJs into the picture:

Include Angular.Js animate lib in script tag as:

src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”

Refer to the ngAnimate module inside the body tag as:

ng-app=”ngAnimate”

ngAnimate module adds and removes classes. The Directives used in AngularJS that add/remove classes are:

ng-show, ng-hide

Example: This example describes the implementation of Angular.Js animation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"> 
    </script> 
    
    <style> 
        div { 
            transition: 0.6s; 
            border-radius: 500%; 
            height: 250px; 
            width: 250px; 
            background-color: red; 
            display: inline-block; 
        } 
          
        .ng-hide { 
            background-color: yellow; 
            top: 5px; 
            left: 100px; 
        } 
    </style> 
</head> 
  
<body ng-app="ngAnimate" style="text-align:center"> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>AngularJS Animations</h3> 
    <h3>Hide the Circle 
        <input type="checkbox" ng-model="myCheck"> 
    </h3> 
    <div ng-hide="myCheck"></div> 
</body> 
</html>