Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix(ngAnimate): check elapsedTime on current event
Browse files Browse the repository at this point in the history 
onAnimationProgress now checks the event's elapsedTime property before
checking the originalEvent.elapsedTime property.
Use browserTrigger with elapsedTime parameter to trigger animation events
  • Loading branch information
@matsko @petebacondarwin
matsko authored and petebacondarwin committed Sep 6, 2013
1 parent 28f56a3 commit d50ed6b
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 40 deletions.
2 changes: 1 addition & 1 deletion src/ngAnimate/animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -659,7 +659,7 @@ angular.module('ngAnimate', ['ng'])
}

function onAnimationProgress(event) {
event.originalEvent.elapsedTime >= totalTime && done();
(event.elapsedTime || (event.originalEvent && event.originalEvent.elapsedTime)) >= totalTime && done();
}

function parseMaxTime(str) {
Expand Down
78 changes: 39 additions & 39 deletions test/ngAnimate/animateSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-enter')).toBe(true);
expect(child.hasClass('ng-enter-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element, 'transitionend', { elapsedTime: 1 });
}

expect(element.contents().length).toBe(1);
Expand All @@ -154,7 +154,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-leave')).toBe(true);
expect(child.hasClass('ng-leave-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}

expect(element.contents().length).toBe(0);
Expand Down Expand Up @@ -186,7 +186,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-hide-remove')).toBe(true);
expect(child.hasClass('ng-hide-remove-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}
expect(child.hasClass('ng-hide-remove')).toBe(false);
expect(child.hasClass('ng-hide-remove-active')).toBe(false);
Expand All @@ -202,7 +202,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-hide-add')).toBe(true);
expect(child.hasClass('ng-hide-add-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}
expect(child).toBeHidden();
}));
Expand All @@ -221,7 +221,7 @@ describe("ngAnimate", function() {

expect(child.attr('class')).toContain('ng-enter');
expect(child.attr('class')).toContain('ng-enter-active');
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });

//move
element.append(after);
Expand All @@ -230,26 +230,26 @@ describe("ngAnimate", function() {

expect(child.attr('class')).toContain('ng-move');
expect(child.attr('class')).toContain('ng-move-active');
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });

//hide
$animate.addClass(child, 'ng-hide');
expect(child.attr('class')).toContain('ng-hide-add');
expect(child.attr('class')).toContain('ng-hide-add-active');
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });

//show
$animate.removeClass(child, 'ng-hide');
expect(child.attr('class')).toContain('ng-hide-remove');
expect(child.attr('class')).toContain('ng-hide-remove-active');
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });

//leave
$animate.leave(child);
$rootScope.$digest();
expect(child.attr('class')).toContain('ng-leave');
expect(child.attr('class')).toContain('ng-leave-active');
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}));

it("should not run if animations are disabled",
Expand Down Expand Up @@ -292,7 +292,7 @@ describe("ngAnimate", function() {

if($sniffer.transitions) {
expect(element.children().length).toBe(1); //still animating
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}
$timeout.flush(2000);
$timeout.flush(2000);
Expand All @@ -309,7 +309,7 @@ describe("ngAnimate", function() {
child.addClass('custom-delay ng-hide');
$animate.removeClass(child, 'ng-hide');
if($sniffer.transitions) {
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}
$timeout.flush(2000);

Expand Down Expand Up @@ -373,7 +373,7 @@ describe("ngAnimate", function() {
$animate.removeClass(element, 'ng-hide');

if($sniffer.transitions) {
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
}
$timeout.flush(2000);
$timeout.flush(20000);
Expand Down Expand Up @@ -416,7 +416,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.animations) {
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 4 } });
browserTrigger(element,'animationend', { elapsedTime: 4 });
}
expect(element).toBeShown();
}));
Expand All @@ -439,7 +439,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.animations) {
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 6 } });
browserTrigger(element,'animationend', { elapsedTime: 6 });
}
expect(element).toBeShown();
}));
Expand All @@ -462,7 +462,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.animations) {
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } });
browserTrigger(element,'animationend', { elapsedTime: 2 });
}
expect(element).toBeShown();
}));
Expand All @@ -487,7 +487,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.transitions) {
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } });
browserTrigger(element,'animationend', { elapsedTime: 10 });
}
expect(element).toBeShown();
}));
Expand Down Expand Up @@ -533,7 +533,7 @@ describe("ngAnimate", function() {
if($sniffer.animations) { //cleanup some pending animations
expect(element.hasClass('ng-hide-add')).toBe(true);
expect(element.hasClass('ng-hide-add-active')).toBe(true);
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } });
browserTrigger(element,'animationend', { elapsedTime: 2 });
}

expect(element.hasClass('ng-hide-remove-active')).toBe(false);
Expand Down Expand Up @@ -566,7 +566,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.transitions) {
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
}
expect(element).toBeShown();
}));
Expand All @@ -587,9 +587,9 @@ describe("ngAnimate", function() {
$animate.removeClass(element, 'ng-hide');
if ($sniffer.transitions) {
expect(element).toBeHidden();
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 2 } });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
browserTrigger(element,'transitionend', { elapsedTime: 2 });
}
expect(element).toBeShown();
}));
Expand Down Expand Up @@ -620,9 +620,9 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.transitions) {
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 0 } });
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element,'transitionend', { elapsedTime: 0 });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
}
expect(element).toBeShown();
}));
Expand All @@ -644,7 +644,7 @@ describe("ngAnimate", function() {

$animate.removeClass(element, 'ng-hide');
if ($sniffer.transitions) {
element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } });
browserTrigger(element,'animationend', { elapsedTime: 10 });
}
expect(element).toBeShown();
}));
Expand All @@ -664,7 +664,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(element.hasClass('ng-hide-remove')).toBe(true);
expect(element.hasClass('ng-hide-remove-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
}
expect(element.hasClass('ng-hide-remove')).toBe(false);
expect(element.hasClass('ng-hide-remove-active')).toBe(false);
Expand Down Expand Up @@ -700,7 +700,7 @@ describe("ngAnimate", function() {
if ($sniffer.transitions) {
expect(element.hasClass('abc ng-enter')).toBe(true);
expect(element.hasClass('abc ng-enter ng-enter-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 22 } });
browserTrigger(element,'transitionend', { elapsedTime: 22 });
}
expect(element.hasClass('abc')).toBe(true);

Expand All @@ -711,7 +711,7 @@ describe("ngAnimate", function() {
if ($sniffer.transitions) {
expect(element.hasClass('xyz')).toBe(true);
expect(element.hasClass('xyz ng-enter ng-enter-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } });
browserTrigger(element,'transitionend', { elapsedTime: 11 });
}
expect(element.hasClass('xyz')).toBe(true);
}));
Expand All @@ -738,7 +738,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('one two ng-enter ng-enter-active')).toBe(true);
expect(element.hasClass('one-active')).toBe(false);
expect(element.hasClass('two-active')).toBe(false);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } });
browserTrigger(element,'transitionend', { elapsedTime: 3 });
}

expect(element.hasClass('one two')).toBe(true);
Expand Down Expand Up @@ -887,7 +887,7 @@ describe("ngAnimate", function() {
});

if($sniffer.transitions) {
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(element,'transitionend', { elapsedTime: 1 });
}
$timeout.flush();
expect(flag).toBe(true);
Expand Down Expand Up @@ -1025,7 +1025,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klass')).toBe(false);
expect(element.hasClass('klass-add')).toBe(true);
expect(element.hasClass('klass-add-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } });
browserTrigger(element,'transitionend', { elapsedTime: 3 });
}

//this cancels out the older animation
Expand All @@ -1039,7 +1039,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klass-add-active')).toBe(false);

expect(element.hasClass('klass-remove')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } });
browserTrigger(element,'transitionend', { elapsedTime: 3 });
}
$timeout.flush();

Expand Down Expand Up @@ -1097,7 +1097,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(element.hasClass('klass-add')).toBe(true);
expect(element.hasClass('klass-add-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } });
browserTrigger(element,'transitionend', { elapsedTime: 11 });
expect(element.hasClass('klass-add')).toBe(false);
expect(element.hasClass('klass-add-active')).toBe(false);
}
Expand All @@ -1111,7 +1111,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(element.hasClass('klass-remove')).toBe(true);
expect(element.hasClass('klass-remove-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } });
browserTrigger(element,'transitionend', { elapsedTime: 11 });
expect(element.hasClass('klass-remove')).toBe(false);
expect(element.hasClass('klass-remove-active')).toBe(false);
}
Expand Down Expand Up @@ -1146,7 +1146,7 @@ describe("ngAnimate", function() {

expect(element.hasClass('one-add-active')).toBe(true);
expect(element.hasClass('two-add-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 7 } });
browserTrigger(element,'transitionend', { elapsedTime: 7 });

expect(element.hasClass('one-add')).toBe(false);
expect(element.hasClass('one-add-active')).toBe(false);
Expand Down Expand Up @@ -1190,7 +1190,7 @@ describe("ngAnimate", function() {

expect(element.hasClass('one-remove-active')).toBe(true);
expect(element.hasClass('two-remove-active')).toBe(true);
element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 9 } });
browserTrigger(element,'transitionend', { elapsedTime: 9 });

expect(element.hasClass('one-remove')).toBe(false);
expect(element.hasClass('one-remove-active')).toBe(false);
Expand Down Expand Up @@ -1240,7 +1240,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-enter')).toBe(true);
expect(child.hasClass('ng-enter-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}

expect(child.hasClass('ng-enter')).toBe(false);
Expand All @@ -1262,7 +1262,7 @@ describe("ngAnimate", function() {
if($sniffer.transitions) {
expect(child.hasClass('ng-enter')).toBe(true);
expect(child.hasClass('ng-enter-active')).toBe(true);
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 8 } });
browserTrigger(child,'transitionend', { elapsedTime: 8 });
}
expect(child.hasClass('ng-enter')).toBe(false);
expect(child.hasClass('ng-enter-active')).toBe(false);
Expand Down Expand Up @@ -1314,7 +1314,7 @@ describe("ngAnimate", function() {
$timeout.flush(10);

if($sniffer.transitions) {
child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } });
browserTrigger(child,'transitionend', { elapsedTime: 1 });
}

expect(child.hasClass('i-was-animated')).toBe(true);
Expand Down

0 comments on commit d50ed6b

Please sign in to comment.