Animations make web applications feel highly interactive, modern, and polished.
AngularJS provides extensive support for CSS-based animations through an external module.
To utilize animations, you must first include the angular-animate.js script.
Next, you must formally add the ngAnimate module as a dependency inside your application.
Once loaded, AngularJS will automatically add and remove specific CSS classes during DOM changes!
ngAnimate does not directly alter your HTML elements' physical shapes or colors.
Instead, when directives like ng-show or ng-hide run, it attaches CSS classes like .ng-hide-add.
You simply target those specific classes in your standard CSS file to create the animation transition!
<!-- 1. Include the ngAnimate script --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script><style> /* 2. Define the CSS transition */ div { transition: all linear 0.5s; background-color: lightblue; height: 100px; } .ng-hide { height: 0; opacity: 0; } </style>
<!-- 3. Inject the module --> <body ng-app="myApp"> <input type="checkbox" ng-model="myCheck"> Hide Box
<!-- 4. ngAnimate handles the class application smoothly --> <div ng-hide="myCheck"></div> </body>
<script> var app = angular.module('myApp', ['ngAnimate']); </script>
Animations significantly boost user engagement by providing visual feedback.
However, excessive animations can negatively slow down browser performance on mobile devices.
Use CSS transitions wisely to maintain a fast, SEO-friendly user experience!
Which AngularJS module must be explicitly included to enable automatic animation support?