Skip to content

Commit

Permalink
fix($animateCss): consider options.delay value for closing timeout
Browse files Browse the repository at this point in the history
Previously, options.delay was only considered when a class added an
extra transition style (which leads to style recalculation).

Fixes angular#13355
Closes angular#13363
  • Loading branch information
Narretz committed Nov 25, 2015
1 parent d9ec995 commit 962509e
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 1 deletion.
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
61 changes: 61 additions & 0 deletions test/ngAnimate/animateCssSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1234,6 +1234,67 @@ describe("ngAnimate $animateCss", function() {
$timeout.flush();
}).not.toThrow();
}));

it("should consider a positive 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: 3,
duration: 3,
to: {
height: '100px'
}
};

var animator = $animateCss(element, options);

animator.start();
triggerAnimationStartFrame();

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

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

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

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

expect(element.css(prefix + 'transition-delay')).toBe('');
}));

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();

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

//150% of duration
$timeout.flush(4500);
expect(element.css(prefix + 'transition-delay')).toBe('');
}));

});

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

0 comments on commit 962509e

Please sign in to comment.