Skip to content
Related Articles

Related Articles

AngularJS | Animations
  • Last Updated : 23 May, 2019

To create animation effect in Angular.Js using ngAnimate module, that provides support for CSS based animations.
The animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using ngAnimate module that gives us a combined effect of Javascript and CSS.

Using this sample code, the demonstration of hiding the division/section is showed 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 body tag as:

    ng-app=”ngAnimate”



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

    ng-show, ng-hide

Examples: Below is the implementation of Angular.Js animation.




<html>
<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>
    
<script src=
  </script>
    
<script src=
  </script>
  
<body ng-app="ngAnimate">
  
    <h1>Hide the Circle 
      <input type="checkbox" 
             ng-model="myCheck">
  </h1>
  
    <div ng-hide="myCheck"></div>
  
</body>
  
</html>


Output:
Before:

After:

My Personal Notes arrow_drop_up
Recommended Articles
Page :