Open In App

AngularJS Animations

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
    </script>
  
    <script src=
    </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>


Output:

 



Last Updated : 06 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads