fix($animate): make animation onComplete callbacks async

This commit is contained in:
Matias Niemelä 2013-07-25 21:19:20 -04:00 committed by Misko Hevery
parent 15389b0e37
commit e31104fa6c
3 changed files with 13 additions and 19 deletions

View file

@ -203,8 +203,8 @@ angular.module('ngAnimate', ['ng'])
var NG_ANIMATE_STATE = '$$ngAnimateState'; var NG_ANIMATE_STATE = '$$ngAnimateState';
var rootAnimateState = {running:true}; var rootAnimateState = {running:true};
$provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout',
function($delegate, $injector, $sniffer, $rootElement) { function($delegate, $injector, $sniffer, $rootElement, $timeout) {
var noop = angular.noop; var noop = angular.noop;
var forEach = angular.forEach; var forEach = angular.forEach;
@ -463,7 +463,8 @@ angular.module('ngAnimate', ['ng'])
if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running) { if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running) {
//avoid calling done() since there is no need to remove any //avoid calling done() since there is no need to remove any
//data or className values since this happens earlier than that //data or className values since this happens earlier than that
(onComplete || noop)(); //and also use a timeout so that it won't be asynchronous
$timeout(onComplete || noop, 0, false);
return; return;
} }

View file

@ -32,12 +32,6 @@ describe("ngAnimate", function() {
describe("enable / disable", function() { describe("enable / disable", function() {
beforeEach(function() {
module(function($animateProvider, $provide) {
$provide.value('$window', angular.mock.createMockWindow());
});
});
it("should disable and enable the animations", function() { it("should disable and enable the animations", function() {
var $animate, initialState = null; var $animate, initialState = null;
@ -259,8 +253,8 @@ describe("ngAnimate", function() {
$animate.removeClass(element, 'ng-hide'); $animate.removeClass(element, 'ng-hide');
if($sniffer.transitions) { if($sniffer.transitions) {
$timeout.flushNext(1);
$timeout.flushNext(0); $timeout.flushNext(0);
$timeout.flushNext(1);
} }
$timeout.flushNext(0); $timeout.flushNext(0);
expect(element.text()).toBe('memento'); expect(element.text()).toBe('memento');
@ -510,7 +504,7 @@ describe("ngAnimate", function() {
})); }));
it("should skip animations if disabled and run when enabled", it("should skip animations if disabled and run when enabled",
inject(function($animate, $rootScope, $compile, $sniffer) { inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
$animate.enabled(false); $animate.enabled(false);
var style = 'animation: some_animation 2s linear 0s 1 alternate;' + var style = 'animation: some_animation 2s linear 0s 1 alternate;' +
vendorPrefix + 'animation: some_animation 2s linear 0s 1 alternate;' vendorPrefix + 'animation: some_animation 2s linear 0s 1 alternate;'
@ -519,6 +513,7 @@ describe("ngAnimate", function() {
element.addClass('ng-hide'); element.addClass('ng-hide');
expect(element).toBeHidden(); expect(element).toBeHidden();
$animate.removeClass(element, 'ng-hide'); $animate.removeClass(element, 'ng-hide');
$timeout.flush();
expect(element).toBeShown(); expect(element).toBeShown();
})); }));
@ -563,9 +558,9 @@ describe("ngAnimate", function() {
element.addClass('ng-hide'); element.addClass('ng-hide');
expect(element).toBeHidden(); expect(element).toBeHidden();
$animate.removeClass(element, 'ng-hide'); $animate.removeClass(element, 'ng-hide');
expect(element).toBeShown();
$timeout.flushNext(0); $timeout.flushNext(0);
$timeout.flushNext(0);
expect(element).toBeShown();
$animate.enabled(true); $animate.enabled(true);
@ -591,6 +586,7 @@ describe("ngAnimate", function() {
$timeout.flushNext(1); $timeout.flushNext(1);
$timeout.flushNext(2000); $timeout.flushNext(2000);
} }
$timeout.flush();
expect(element).toBeShown(); expect(element).toBeShown();
})); }));
@ -604,10 +600,10 @@ describe("ngAnimate", function() {
element.addClass('ng-hide'); element.addClass('ng-hide');
$animate.removeClass(element, 'ng-hide'); $animate.removeClass(element, 'ng-hide');
$timeout.flushNext(0);
$timeout.flushNext(0);
expect(element).toBeShown(); expect(element).toBeShown();
$timeout.flushNext(0); //callback which is called
$animate.enabled(true); $animate.enabled(true);
element.addClass('ng-hide'); element.addClass('ng-hide');
@ -618,7 +614,7 @@ describe("ngAnimate", function() {
$timeout.flushNext(1); $timeout.flushNext(1);
$timeout.flushNext(3000); $timeout.flushNext(3000);
} }
$timeout.flushNext(0); $timeout.flush();
expect(element).toBeShown(); expect(element).toBeShown();
})); }));

View file

@ -6,7 +6,6 @@ describe('ngView', function() {
beforeEach(module('ngRoute')); beforeEach(module('ngRoute'));
beforeEach(module(function($provide) { beforeEach(module(function($provide) {
$provide.value('$window', angular.mock.createMockWindow());
return function($rootScope, $compile, $animate) { return function($rootScope, $compile, $animate) {
element = $compile('<div><ng:view onload="load()"></ng:view></div>')($rootScope); element = $compile('<div><ng:view onload="load()"></ng:view></div>')($rootScope);
}; };
@ -539,7 +538,6 @@ describe('ngView animations', function() {
beforeEach(module(function($provide, $routeProvider) { beforeEach(module(function($provide, $routeProvider) {
$provide.value('$window', angular.mock.createMockWindow());
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'}); $routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
$routeProvider.when('/bar', {controller: noop, templateUrl: '/bar.html'}); $routeProvider.when('/bar', {controller: noop, templateUrl: '/bar.html'});
return function($templateCache) { return function($templateCache) {
@ -611,7 +609,6 @@ describe('ngView animations', function() {
var window; var window;
module(function($routeProvider, $animateProvider, $provide) { module(function($routeProvider, $animateProvider, $provide) {
$provide.value('$window', window = angular.mock.createMockWindow());
$routeProvider.when('/foo', {template: '<div ng-repeat="i in [1,2]">{{i}}</div>'}); $routeProvider.when('/foo', {template: '<div ng-repeat="i in [1,2]">{{i}}</div>'});
$routeProvider.when('/bar', {template: '<div ng-repeat="i in [3,4]">{{i}}</div>'}); $routeProvider.when('/bar', {template: '<div ng-repeat="i in [3,4]">{{i}}</div>'});
$animateProvider.register('.my-animation', function() { $animateProvider.register('.my-animation', function() {