AngularJS | Animations

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:
Before:

After:



My Personal Notes arrow_drop_up

I am computer engineer and work as content creator for various sites as freelancer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.