I am here to continue the discussion around AngularJS. Today, we will discuss how to create custom animation using angular js. Also in case you have not had a look at our previous articles of this series, go through the following links:

In this article, we will discuss how use AngularJS with advanced animation using $animation service.

The AngularJS animation module enables us to create animations with CSS3 or JavaScript. Now we will learn how to animate an AngularJS directive using purely JavaScript so that we can create animations even for browsers without support of CSS3, or integrate with some commonly used JavaScript animations libraries such as jQuery animate and GSAP JS. For this article, we will use jQuery as the JavaScript animations library because it's very intuitive and well known. We will integrate this library with AngularJS native directives so that we can easily get the built-in benefits of AngularJS and animate using jQuery.

First, we have to declare the animation using the animation() method; the declaration is really similar to the way in which you define an AngularJS factory. We specify the class of target elements where we want to display the animation on the first parameter of the animation method. The ngAnimate module of AngularJS checks whether there is any animation defined for the DOM manipulation event that is being triggered. It also checks for transitions, animations, and JavaScript animation callback functions. If at least one of these exists, it triggers the animations. For the JavaScript animations declaration, we define callback functions to be called when an element with the same class as defined on the animation method triggers an event like addClass. If there is a callback defined for this addClass event, it's called; otherwise, it skips the animation step.

FirstAnimation.js
  1. function firstJsAnimation() {
  2. var addClassAnimation = function (element, className, done) {
  3. if (className != 'animationClass') {
  4. return;
  5. }
  6. jQuery(element).slideUp(300, done);
  8. return function (isCancelled) {
  9. if (isCancelled) {
  10. element.stop();
  11. }
  12. };
  13. }
  15. var removeClassAnimation = function (element,className, done) {
  16. if (className != 'animationClass') {
  17. return;
  18. }
  19. jQuery(element).slideDown(300, done);
  21. return function (isCancelled) {
  22. if (isCancelled) {
  23. element.stop();
  24. }
  25. };
  26. }
  28. return {
  29. addClass: addClassAnimation,
  30. removeClass: removeClassAnimation
  31. };
  32. }
App.js
  1. var app = angular.module('myApp', ['ngAnimate']).animation(".firstJsAnimation", firstJsAnimation);
Index.html
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>AngularJS JavaScript animations - ngClass</title>
  5. <script src="jquery.min.js"></script>
  6. <script src="angular.min.js"></script>
  7. <script src="angular-animate.min.js"></script>
  8. <script src="index.js"></script>
  9. </head>
  10. <body>
  11. <link href="bootstrap.css" rel="stylesheet" />
  12. <h2>ngClass JavaScript Animation</h2>
  13. <button ng-click="toggleNgClass = !toggleNgClass">
  14. Toggle ngClass animation
  15. </button>
  16. <div ng-class="{'animationClass' : toggleNgClass}" class="firstJsAnimation alert alert-info">
  17. This element has class 'ngClassAnimationSample' and the ngClass directive is declared as ng-class="{'animationClass' : toggleNgClass}"
  18. </div>
  20. </body>
  21. </html>
The output of the above code as below -

Using the $animate.move method

The method that moves one element from one place to another in DOM and triggers animation is $animate.move. It's used by the ngRepeat directive, and it can be used in any custom directive that moves DOM elements too. The signature is the same as the $animate.enter method; the only difference is that the element is not added to DOM, but it's moved:

$animate.move(element, parentElement, afterElement);

MoveDirective.js
  1. var app = angular.module('myApp', ['ngAnimate'])
  2. .directive('moveDirective', function ($animate) {
  3. return {
  4. link: function ($scope, $element, $attrs) {
  5. var elements = $element.children();
  6. var count = 0;
  7. $element.on('click', function () {
  8. count++;
  9. if (count % 3 == 1) {
  10. $animate.move(angular.element(elements[2]), $element);
  11. } else if (count % 3 == 2) {
  12. $animate.move(angular.element(elements[1]), $element);
  13. } else {
  14. $animate.move(angular.element(elements[0]), $element);
  15. }
  16. $scope.$apply();
  17. });
  18. }
  19. }
  20. });
Index.html
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>AngularJS Custom Directives animations</title>
  5. <style>
  6. .moveItem.ng-move {
  7. -webkit-animation: 1s ng-move-repeat-animation;
  8. animation: 1s ng-move-repeat-animation;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <h2>$animate move sample</h2>
  14. <p>Click on any element below to move elements:</p>
  15. <div move-directive="">
  16. <div class="element1 moveItem">Element 1</div>
  17. <div class="element2 moveItem">Element 2</div>
  18. <div class="element3 moveItem">Element 3</div>
  19. </div>
  20. <script src="angular.min.js"></script>
  21. <script src="angular-animate.min.js"></script>
  22. <script src="moveDirective.js"></script>
  23. </body>
  24. </html>