From 6760d7a315d7ea5cbd4f8ab74b200f754a2041f4 Mon Sep 17 00:00:00 2001
From: Matias Niemelä
Date: Tue, 19 Nov 2013 00:21:48 -0500
Subject: fix($animate): ensure keyframe animations are blocked around the
 reflow

Keyframe animations trigger on the first CSS class and not the second.
This may cause a slight flicker during a stagger animation since the
animation has already started before the stagger delay is considered.
This fix ensures that the animation is blocked until the active animation
starts which allows for staggering animations to take over properly.

Closes #5018
---
 src/ngAnimate/animate.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src')

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index 1956d54c..4d3a5878 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -1002,6 +1002,8 @@ angular.module('ngAnimate', ['ng'])
           element.addClass(NG_ANIMATE_FALLBACK_CLASS_NAME);
           activeClassName += NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME + ' ';
           blockTransitions(element);
+        } else {
+          blockKeyframeAnimations(element);
         }
 
         forEach(className.split(' '), function(klass, i) {
@@ -1025,6 +1027,10 @@ angular.module('ngAnimate', ['ng'])
         element[0].style[TRANSITION_PROP + PROPERTY_KEY] = 'none';
       }
 
+      function blockKeyframeAnimations(element) {
+        element[0].style[ANIMATION_PROP] = 'none 0s';
+      }
+
       function unblockTransitions(element) {
         var node = element[0], prop = TRANSITION_PROP + PROPERTY_KEY;
         if(node.style[prop] && node.style[prop].length > 0) {
@@ -1032,6 +1038,10 @@ angular.module('ngAnimate', ['ng'])
         }
       }
 
+      function unblockKeyframeAnimations(element) {
+        element[0].style[ANIMATION_PROP] = '';
+      }
+
       function animateRun(element, className, activeAnimationComplete) {
         var data = element.data(NG_ANIMATE_CSS_DATA_KEY);
         if(!element.hasClass(className) || !data) {
@@ -1059,6 +1069,8 @@ angular.module('ngAnimate', ['ng'])
             style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; ';
             style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; ';
           }
+        } else {
+          unblockKeyframeAnimations(element);
         }
 
         if(ii > 0) {
-- 
cgit v1.2.3