diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/ngAnimate/animate.js | 34 |
1 files changed, 25 insertions, 9 deletions
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index 696e80b1..ca136a50 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -201,9 +201,9 @@ angular.module('ngAnimate', ['ng']) var NG_ANIMATE_STATE = '$$ngAnimateState'; var rootAnimateState = {running:true}; - $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout', - function($delegate, $injector, $sniffer, $rootElement, $timeout) { - + $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout', '$rootScope', + function($delegate, $injector, $sniffer, $rootElement, $timeout, $rootScope) { + $rootElement.data(NG_ANIMATE_STATE, rootAnimateState); function lookup(name) { @@ -282,8 +282,10 @@ angular.module('ngAnimate', ['ng']) */ enter : function(element, parent, after, done) { $delegate.enter(element, parent, after); - performAnimation('enter', 'ng-enter', element, parent, after, function() { - done && $timeout(done, 0, false); + $rootScope.$$postDigest(function() { + performAnimation('enter', 'ng-enter', element, parent, after, function() { + done && $timeout(done, 0, false); + }); }); }, @@ -315,8 +317,10 @@ angular.module('ngAnimate', ['ng']) * @param {function()=} done callback function that will be called once the animation is complete */ leave : function(element, done) { - performAnimation('leave', 'ng-leave', element, null, null, function() { - $delegate.leave(element, done); + $rootScope.$$postDigest(function() { + performAnimation('leave', 'ng-leave', element, null, null, function() { + $delegate.leave(element, done); + }); }); }, @@ -352,8 +356,10 @@ angular.module('ngAnimate', ['ng']) */ move : function(element, parent, after, done) { $delegate.move(element, parent, after); - performAnimation('move', 'ng-move', element, null, null, function() { - done && $timeout(done, 0, false); + $rootScope.$$postDigest(function() { + performAnimation('move', 'ng-move', element, null, null, function() { + done && $timeout(done, 0, false); + }); }); }, @@ -550,6 +556,7 @@ angular.module('ngAnimate', ['ng']) var durationKey = 'Duration', delayKey = 'Delay', + propertyKey = 'Property', animationIterationCountKey = 'IterationCount', ELEMENT_NODE = 1; @@ -610,6 +617,13 @@ angular.module('ngAnimate', ['ng']) timeout is empty (this would cause a flicker bug normally in the page */ if(duration > 0) { + var node = element[0]; + + //temporarily disable the transition so that the enter styles + //don't animate twice (this is here to avoid a bug in Chrome/FF). + node.style[w3cTransitionProp + propertyKey] = 'none'; + node.style[vendorTransitionProp + propertyKey] = 'none'; + var activeClassName = ''; forEach(className.split(' '), function(klass, i) { activeClassName += (i > 0 ? ' ' : '') + klass + '-active'; @@ -617,6 +631,8 @@ angular.module('ngAnimate', ['ng']) //this triggers a reflow which allows for the transition animation to kick in element.prop('clientWidth'); + node.style[w3cTransitionProp + propertyKey] = ''; + node.style[vendorTransitionProp + propertyKey] = ''; element.addClass(activeClassName); $timeout(done, duration * 1000, false); |