fix($animate): only block keyframes if a stagger is set to occur

Transitions must be blocked so that the initial CSS class can be applied
without triggering an animation. Keyframes do not need to be blocked since
animations are always triggered on the starting CSS class, however, if a
stagger animation is set to occur then all elements for index > 0 should
be blocked. This is to prevent the animation from occuring early on before
the stagger delay for the given element has passed.

With ngAnimate and keyframe animations, IE10 and Safari will render a slight
flicker effect caused by the blocking. This fix resolves this issue.

Closes #4225

1 files changed, 8 insertions, 1 deletions

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index 0e5fda98..4b35d5fd 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -1252,7 +1252,14 @@ angular.module('ngAnimate', ['ng'])
         if(transitionDuration > 0) {
           blockTransitions(element, className, isCurrentlyAnimating);
         }
-        if(animationDuration > 0) {
+
+        //staggering keyframe animations work by adjusting the `animation-delay` CSS property
+        //on the given element, however, the delay value can only calculated after the reflow
+        //since by that time $animate knows how many elements are being animated. Therefore,
+        //until the reflow occurs the element needs to be blocked (where the keyframe animation
+        //is set to `none 0s`). This blocking mechanism should only be set for when a stagger
+        //animation is detected and when the element item index is greater than 0.
+        if(animationDuration > 0 && stagger.animationDelay > 0 && stagger.animationDuration === 0) {
           blockKeyframeAnimations(element);
         }