Animation in angularJS
Animation provides a solution for moving objects in angularJS, helping to increase the user experience of the application, making the application smoother.
$ngAnimate
Steps to start using ngAnimate in angularJS: integrate angulare-animate.js library into project before use and put ngAnimate object and parameters in array upon application initialization ( dependency injection ). See below example to understand how to use ngAnimate.
Note: ngAnimate only works on stable version 1.2.32 , not on latest version
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example animation</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.32/angular-animate.min.js"></script> <style> div { transition: all linear 0.5s; background-color: cyan; height: 100px; width: 100%; position: relative; top: 0px; left: 0px; } .ng-hide { height: 0px; width: 0px; background-color: transparent; top: -200px; left: 200px; } </style> </head> <body ng-app="myApp" ng-controller="myController"> <h2>hide the DIV: <input type="checkbox" ng-model="myModel" /></h2> <div ng-hide="myModel"></div> </body> <script> var app = angular.module('myApp', ['ngAnimate']); app.controller('myController', function ($scope) { $scope.myModel = false; }); </script> </html>
