Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

AngularJS Animations


In AngularJS, you can build animated transition with the help of CSS. The CSS transforms the HTML elements that give you an illusion of motion.


You must include the following things to make your application ready for animations:

AngularJS Animate library:

  • <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js”></script>

Refer to the ngAnimate module in your application:

  • <body ng-app=”ngAnimate”>

AngularJS Animation Example

  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. div {
  5.   transition: all linear 0.5s;
  6.   background-color: lightblue;
  7.   height: 100px;
  8.   width: 100%;
  9.   position: relative;
  10.   top: 0;
  11.   left: 0;
  12. }
  13. .ng-hide {
  14.   height: 0;
  15.   width: 0;
  16.   background-color: transparent;
  17.   top:-200px;
  18.   left: 200px;
  19. }
  20. </style>
  21. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  22. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js”></script>
  23. <body ng-app=“ngAnimate”>
  24. <h1>Hide the DIV: <input type=“checkbox” ng-model=“myCheck”></h1>
  25. <div ng-hide=“myCheck”></div>
  26. </body>
  27. </html>

Test it Now

What does ngAnimate do?

The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.

Following is a list of directives in AngularJS who add/remove classes:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

Comments

comments