@@ -569,7 +569,7 @@ angular.module('ngAnimate', ['ng'])
569
569
}
570
570
} ] ) ;
571
571
572
- $animateProvider . register ( '' , [ '$window' , '$sniffer' , function ( $window , $sniffer ) {
572
+ $animateProvider . register ( '' , [ '$window' , '$sniffer' , '$timeout' , function ( $window , $sniffer , $timeout ) {
573
573
var forEach = angular . forEach ;
574
574
575
575
// Detect proper transitionend/animationend event names.
@@ -605,6 +605,19 @@ angular.module('ngAnimate', ['ng'])
605
605
animationIterationCountKey = 'IterationCount' ,
606
606
ELEMENT_NODE = 1 ;
607
607
608
+ var animationReflowQueue = [ ] , animationTimer , timeOut = false ;
609
+ function afterReflow ( callback ) {
610
+ animationReflowQueue . push ( callback ) ;
611
+ $timeout . cancel ( animationTimer ) ;
612
+ animationTimer = $timeout ( function ( ) {
613
+ angular . forEach ( animationReflowQueue , function ( fn ) {
614
+ fn ( ) ;
615
+ } ) ;
616
+ animationReflowQueue = [ ] ;
617
+ animationTimer = null ;
618
+ } , 10 , false ) ;
619
+ }
620
+
608
621
function animate ( element , className , done ) {
609
622
if ( [ 'ng-enter' , 'ng-leave' , 'ng-move' ] . indexOf ( className ) == - 1 ) {
610
623
var existingDuration = 0 ;
@@ -670,13 +683,15 @@ angular.module('ngAnimate', ['ng'])
670
683
} ) ;
671
684
672
685
// This triggers a reflow which allows for the transition animation to kick in.
673
- element . prop ( 'clientWidth' ) ;
674
- if ( transitionDuration > 0 ) {
675
- node . style [ transitionProp + propertyKey ] = '' ;
676
- }
677
- element . addClass ( activeClassName ) ;
678
-
679
686
var css3AnimationEvents = animationendEvent + ' ' + transitionendEvent ;
687
+
688
+ afterReflow ( function ( ) {
689
+ if ( transitionDuration > 0 ) {
690
+ node . style [ transitionProp + propertyKey ] = '' ;
691
+ }
692
+ element . addClass ( activeClassName ) ;
693
+ } ) ;
694
+
680
695
element . on ( css3AnimationEvents , onAnimationProgress ) ;
681
696
682
697
// This will automatically be called by $animate so
0 commit comments