2

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/

Improve this question

1 Answer 1

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

First, thanks for the response ;) Very helpful - As in my jsfiddle example I use the latest version of AngularJS 1.3.x - Do you mind of giving me a little example maybe in jsfiddle of how it is done?
OKay - I ended op doing something else - but if you wanna take the time, I'm still interested in the "better" way solution ;) this is my way ;) jsfiddle.net/zookz/9kanr29z/12
@pkdkk Sorry, I am a little late getting back to you - I like the use of $timeout in your solution and that's probably the best solution for you since you are using animations rather than transitions. I will fork your fiddle and share the $animate solution here shortly.
Okay @pkdkk. Since you switched to ng-repeat for your cards, the use of $animate went away. However, I did throw together an "angular way" of doing the animating you were wanting (for the most part), just not using the $animate service. Instead, I used what is natively built in. Let me know what you think, and if you still need an $animate promise example. jsfiddle.net/9kanr29z/14 Sorry for the changes in the code, but I wanted to simplify it as much as possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.