All for Joomla All for Webmasters

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>

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
PinIt
submit to reddit

Leave a Reply

Top