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

fix($animateCss): consider options.delay value for closing timeout #13363

Merged
merged 1 commit into from
Nov 26, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/ngAnimate/animateCss.js
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
}

if (options.delay != null) {
var delayStyle = parseFloat(options.delay);
var delayStyle;
if (typeof options.delay !== "boolean") {
delayStyle = parseFloat(options.delay);
// number in options.delay means we have to recalculate the delay for the closing timeout
maxDelay = Math.max(delayStyle, 0);
}

if (flags.applyTransitionDelay) {
temporaryStyles.push(getCssDelayStyle(delayStyle));
Expand Down
68 changes: 68 additions & 0 deletions test/ngAnimate/animateCssSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1234,6 +1234,74 @@ describe("ngAnimate $animateCss", function() {
$timeout.flush();
}).not.toThrow();
}));

it("should consider a positive options.delay value for the closing timeout",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why this test fails. It should ensure that the animation ends exactly then when it's supposed to be, not before. And it passed locally for me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It fails with jquery, because the .css implementation is different from jqlite's

inject(function($animateCss, $rootElement, $timeout, $document) {

var element = jqLite('<div></div>');
$rootElement.append(element);
jqLite($document[0].body).append($rootElement);

var options = {
delay: 3,
duration: 3,
to: {
height: '100px'
}
};

var animator = $animateCss(element, options);

animator.start();
triggerAnimationStartFrame();

// At this point, the animation should still be running (closing timeout is 7500ms ... duration * 1.5 + delay => 7.5)
$timeout.flush(7000);

expect(element.css(prefix + 'transition-delay')).toBe('3s');
expect(element.css(prefix + 'transition-duration')).toBe('3s');

// Let's flush the remaining amout of time for the timeout timer to kick in
$timeout.flush(500);

dump(element.attr('style'));
expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
}));

it("should ignore a boolean options.delay value for the closing timeout",
inject(function($animateCss, $rootElement, $timeout, $document) {

var element = jqLite('<div></div>');
$rootElement.append(element);
jqLite($document[0].body).append($rootElement);

var options = {
delay: true,
duration: 3,
to: {
height: '100px'
}
};

var animator = $animateCss(element, options);

animator.start();
triggerAnimationStartFrame();

// At this point, the animation should still be running (closing timeout is 4500ms ... duration * 1.5 => 4.5)
$timeout.flush(4000);

expect(element.css(prefix + 'transition-delay')).toBeOneOf('initial', '0s');
expect(element.css(prefix + 'transition-duration')).toBe('3s');

// Let's flush the remaining amout of time for the timeout timer to kick in
$timeout.flush(500);

expect(element.css(prefix + 'transition-duration')).toBeOneOf('', '0s');
expect(element.css(prefix + 'transition-delay')).toBeOneOf('', '0s');
}));

});

describe("getComputedStyle", function() {
Expand Down