CODEWITHSUNDEEP
javascriptangularjscssangularjs-directivecss-animations
pkdkk
pkdkk

Reputation: 3963

AngularJS animate with callback, wait for the next animation to start

I have a simple AngularJS project with a directive that I want to start a CSS animation when another is done - hope i make sende, I have a jsfiddle example here, where the animation run at the same time - I want the first "card" animations to stop before the next starts - how can that be done?

<div ng-app="flip" ng-controller="flipCtrl">
    <div class="card card1 draw" my-show="">test1</div>
    <div class="card card2 draw" my-show="">test2</div>
</div>

app.directive("myShow", function(){
  return {
    scope:{
      param: "&myShow"
    },
    link: function( scope, element, attrs ){
        element.on('click', function() {
            if(element.hasClass('draw')) {
                element.removeClass('draw');                
            }else{
                element.addClass('draw');
            }
        });
    }
  }
});

http://jsfiddle.net/9kanr29z/5/

Upvotes: 2

Views: 3105

Answers (1)

Stephen J Barker
Stephen J Barker

Reputation: 1019

First off, it is important to remember to include which version of AngularJS you are using. However, I will provide both 1.2 and 1.3+ solutions. If you are using a version less than 1.2, you should really consider upgrading.

The $animate Service

The $animate service provides an addClass method and a removeClass method that will take care of what you need easily. The behavior changes based upon what version of AngularJS you are using.

Either way, you start by including the animate module (it's separate from the angular.js main file) and then inject the $animate service where you need it.

app.directive("myShow", [
  '$animate',
  function($animate) {
    return {
      // your directive config
    };
  }
]);

AngularJS v1.2.x

The $animate (v1.2.26) service's addClass and removeClass methods have three arguments: element, className, and doneCallback. Here, simply, you can use the doneCallback function argument to tell when an animation is done. For example:

$animate.addClass(element, 'draw', function() {
  // if we are in here, the animation is complete
});

AngularJS v1.3.x

With AngularJS 1.3, each of the animation methods, on the $animate service, return a promise when called. The promise itself is then resolved once the animation has completed itself, has been cancelled or has been skipped due to animations being disabled. (Note that even if the animation is cancelled it will still call the resolve function of the animation.) See Documentation

With 1.3 and above you need to utilize the promise returned by calling addClass or removeClass through the $animate service. You can do so by chaining the then function at the end. For example:

$animate.addClass(element, 'draw').then(function() {
  // if we are in here, the animation is complete
});

If you are using the AngularJS 1.3 RC (latest unstable as of this post) and you aren't familiar with promises then reference the $q service.

Upvotes: 5

Related Questions