Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ngAnimate): cancel previous incomplete animations when new animations take place

Browse source
This commit is contained in:
Matias Niemelä 2013-05-13 15:08:59 -04:00 committed by Misko Hevery
parent c8197b44eb
commit 4acc28a310
2 changed files with 121 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/ng/animator.js
View file

@ -264,6 +264,7 @@ var $AnimatorProvider = function() {
var animationPolyfill = $animation(className);
var polyfillSetup = animationPolyfill && animationPolyfill.setup;
var polyfillStart = animationPolyfill && animationPolyfill.start;
var polyfillCancel = animationPolyfill && animationPolyfill.cancel;
if (!className) {
beforeFn(element, parent, after);
@ -281,7 +282,13 @@ var $AnimatorProvider = function() {
return;
}
element.data(NG_ANIMATE_CONTROLLER, {running:true});
var animationData = element.data(NG_ANIMATE_CONTROLLER) || {};
if(animationData.running) {
(polyfillCancel || noop)(element);
animationData.done();
}
element.data(NG_ANIMATE_CONTROLLER, {running:true, done:done});
element.addClass(className);
beforeFn(element, parent, after);
if (element.length == 0) return done();
@ -354,10 +361,13 @@ var $AnimatorProvider = function() {
}
function done() {
afterFn(element, parent, after);
element.removeClass(className);
element.removeClass(activeClassName);
element.removeData(NG_ANIMATE_CONTROLLER);
if(!done.run) {
done.run = true;
afterFn(element, parent, after);
element.removeClass(className);
element.removeClass(activeClassName);
element.removeData(NG_ANIMATE_CONTROLLER);
}
}
};
}

109
test/ng/animatorSpec.js
View file

@ -128,6 +128,16 @@ describe("$animator", function() {
}
}
});
$animationProvider.register('custom-delay', function() {
return {
start: function(element, done) {
window.setTimeout(done, 2000);
},
cancel : function(element) {
element.addClass('animation-cancelled');
}
}
});
$animationProvider.register('setup-memo', function() {
return {
setup: function(element) {
@ -140,14 +150,16 @@ describe("$animator", function() {
}
});
})
inject(function($animator, $compile, $rootScope) {
inject(function($animator, $compile, $rootScope, $rootElement) {
element = $compile('<div></div>')($rootScope);
child = $compile('<div></div>')($rootScope);
after = $compile('<div></div>')($rootScope);
$rootElement.append(element);
});
})
it("should animate the enter animation event", inject(function($animator, $rootScope) {
$animator.enabled(true);
animator = $animator($rootScope, {
ngAnimate : '{enter: \'custom\'}'
});
@ -158,6 +170,7 @@ describe("$animator", function() {
}));
it("should animate the leave animation event", inject(function($animator, $rootScope) {
$animator.enabled(true);
animator = $animator($rootScope, {
ngAnimate : '{leave: \'custom\'}'
});
@ -273,8 +286,6 @@ describe("$animator", function() {
}));
it("should not run if animations are disabled", inject(function($animator, $rootScope) {
$animator.enabled(true);
$rootScope.$digest(); // clear initial animation suppression
$animator.enabled(false);
animator = $animator($rootScope, {
@ -293,6 +304,54 @@ describe("$animator", function() {
window.setTimeout.expect(1).process();
expect(element.text()).toBe('memento');
}));
it("should only call done() once and right away if another animation takes place in between",
inject(function($animator, $rootScope) {
$animator.enabled(true);
animator = $animator($rootScope, {
ngAnimate : '{hide: \'custom-delay\', leave: \'custom-delay\'}'
});
element.append(child);
child.css('display','block');
animator.hide(child);
window.setTimeout.expect(1).process();
expect(child.css('display')).toBe('block');
animator.leave(child);
expect(child.css('display')).toBe('none'); //hides instantly
//lets change this to prove that done doesn't fire anymore for the previous hide() operation
child.css('display','block');
window.setTimeout.expect(2000).process();
expect(child.css('display')).toBe('block'); //doesn't run the done() method to hide it
expect(element.children().length).toBe(1); //still animating
window.setTimeout.expect(1).process();
window.setTimeout.expect(2000).process();
expect(element.children().length).toBe(0);
}));
it("should call the cancel callback when another animation is called on the same element",
inject(function($animator, $rootScope) {
$animator.enabled(true);
animator = $animator($rootScope, {
ngAnimate : '{hide: \'custom-delay\', show: \'custom-delay\'}'
});
child.css('display','none');
animator.show(element);
window.setTimeout.expect(1).process();
animator.hide(element);
expect(element.hasClass('animation-cancelled')).toBe(true);
}));
});
describe("with CSS3", function() {
@ -413,6 +472,28 @@ describe("$animator", function() {
animator.show(element);
expect(element[0].style.display).toBe('');
}));
it("should finish the previous animation when a new animation is started",
inject(function($animator, $rootScope, $compile, $sniffer) {
if(!$sniffer.animations) return;
var style = 'animation: some_animation 2s linear 0s 1 alternate;' +
vendorPrefix + 'animation: some_animation 2s linear 0s 1 alternate;'
element = $compile(html('<div style="' + style + '">1</div>'))($rootScope);
var animator = $animator($rootScope, {
ngAnimate : '{show: \'show\', hide: \'hide\'}'
});
animator.show(element);
window.setTimeout.expect(1).process();
expect(element.hasClass('show')).toBe(true);
expect(element.hasClass('show-active')).toBe(true);
animator.hide(element);
expect(element.hasClass('show')).toBe(false);
expect(element.hasClass('show-active')).toBe(false);
}));
});
describe("Transitions", function() {
@ -488,6 +569,28 @@ describe("$animator", function() {
}
expect(element[0].style.display).toBe('');
}));
it("should finish the previous transition when a new animation is started",
inject(function($animator, $rootScope, $compile, $sniffer) {
if(!$sniffer.animations) return;
var style = 'transition: 1s linear all;' +
vendorPrefix + 'animation: 1s linear all;'
element = $compile(html('<div style="' + style + '">1</div>'))($rootScope);
var animator = $animator($rootScope, {
ngAnimate : '{show: \'show\', hide: \'hide\'}'
});
animator.show(element);
window.setTimeout.expect(1).process();
expect(element.hasClass('show')).toBe(true);
expect(element.hasClass('show-active')).toBe(true);
animator.hide(element);
expect(element.hasClass('show')).toBe(false);
expect(element.hasClass('show-active')).toBe(false);
}));
});
});