Animating multiple objects at once in AngularJS creates intermittent animations

Question

When I tried to create a slide show that fades in the inputs and outputs, I ran into this problem. What I discovered is that when animated one at a time, they are smooth and seamless. However, when performing several animations, they become volatile and unstable. Here is the code that I use to fade a single image, at the same time, a fading overlapping image (everything happens in the directive):

var fadeToNextImg = function() { var nextImg = imageHandler.getNextImage(); $animate.addClass(curImage, 'ng-hide'); $animate.removeClass(nextImg, 'ng-hide'); curImage = nextImg; }; 

This works, but the animation creates erratic results. Images do not disappear smoothly, but simply appear, or someday one image will disappear. However, if I insert animations so that only one of them happens at a time, then both animations stop perfectly, one immediately after the other , for example:

 var fadeToNextImg = function() { var nextImg = imageHandler.getNextImage(); $animate.addClass(curImage, 'ng-hide', function() { $animate.removeClass(nextImg, 'ng-hide'); curImage = nextImg; }); }; 

This is great .. just not the desired effect that I wanted. I want one image to fade while the other image fades on top of it! Am I doing something wrong? Or is this a bug / performance issue in the Angular Animate library?

Another thing I should know about, I also tried this with a jQuery DOM manipulation outside the directive, and the animation was flawless. I just moved it to the directive because that is the way Angular does things. So why is he raising my animations?

Answer 1

Before using $animate , the main problem you see is that $animate.addClass(...) returns a “promise” after completion, which means it is ASYNCHRONOUS. This means that each subsequent animation should only be activated after the previous feedback has been completed (which means that the image is finally uploaded).

In other words, your $animate.addClass(..) method executes immediately / sequentially and not waiting for the previous one to complete ergo disgust. Also, as you have it, I don't believe ng-hide will work. It seems that your final css state in one image is “obscured”, and the initial css state in the next image has also “disappeared”. In this case, you may need to pass the options object to addClass(...) to handle various states from and to css. Some rough pseudo code on how to use then in the $animate :

 var fadeToNextImg = function() { var nextImg = imageHandler.getNextImage(); var promise = $animate.addClass(curImage, 'endfade'); promise.then(function(results){ $animate.removeClass(...) curImage = nextImg; }); }