{"id":51434,"date":"2019-03-11T09:20:40","date_gmt":"2019-03-11T03:50:40","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=51434"},"modified":"2020-01-31T10:50:33","modified_gmt":"2020-01-31T05:20:33","slug":"angularjs-animation","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-animation\/","title":{"rendered":"AngularJS Animation with Example | How to Add ng-Animate?"},"content":{"rendered":"

After the AngularJS Scope<\/strong><\/a>, we are going to learn different ways to add and create the Animations in AngularJS with the example. Along with this, we will see how to enable or disable animation and a list of directives for animation.<\/p>\n

\"How<\/p>\n

AngularJS Animation<\/h2>\n

Whenever the transformation of HTML elements happens, it gives the feel of the illusion of motion, this phenomenon is known as animation. AngularJS comes with the feature of animated transitions too. With the help of CSS, AngularJS can provide animation<\/em>.<\/p>\n

The very first step for AngularJS animation is to include an animation library.<\/p>\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular-animate.js\"><\/script><\/pre>\n
Then, refer ng-animate module<\/strong> in an application.<\/p>\n
Do you know How to Create Modules in AngularJS?<\/a><\/strong><\/p>\n
Ways to Add ng-Animate<\/h2>\n
Ng-Animate is a module, which is used to add a class or remove a class. It is required to show the animation in your application. If you do not include an ng-animate module in your angular JS application, the animation will not be visible.<\/p>\n
There are two ways to add ng-animate in our application<\/strong><\/p>\n