Skip to content

Commit 962509e

Browse files
committed
fix($animateCss): consider options.delay value for closing timeout
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
1 parent d9ec995 commit 962509e

File tree

2 files changed

+67
-1
lines changed

2 files changed

+67
-1
lines changed

src/ngAnimate/animateCss.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
622622
}
623623

624624
if (options.delay != null) {
625-
var delayStyle = parseFloat(options.delay);
625+
var delayStyle;
626+
if (typeof options.delay !== "boolean") {
627+
delayStyle = parseFloat(options.delay);
628+
// number in options.delay means we have to recalculate the delay for the closing timeout
629+
maxDelay = Math.max(delayStyle, 0);
630+
}
626631

627632
if (flags.applyTransitionDelay) {
628633
temporaryStyles.push(getCssDelayStyle(delayStyle));

test/ngAnimate/animateCssSpec.js

+61
Original file line numberDiff line numberDiff line change
@@ -1234,6 +1234,67 @@ describe("ngAnimate $animateCss", function() {
12341234
$timeout.flush();
12351235
}).not.toThrow();
12361236
}));
1237+
1238+
it("should consider a positive options.delay value for the closing timeout",
1239+
inject(function($animateCss, $rootElement, $timeout, $document) {
1240+
1241+
var element = jqLite('<div></div>');
1242+
$rootElement.append(element);
1243+
jqLite($document[0].body).append($rootElement);
1244+
1245+
var options = {
1246+
delay: 3,
1247+
duration: 3,
1248+
to: {
1249+
height: '100px'
1250+
}
1251+
};
1252+
1253+
var animator = $animateCss(element, options);
1254+
1255+
animator.start();
1256+
triggerAnimationStartFrame();
1257+
1258+
expect(element.css(prefix + 'transition-delay')).toContain('3s');
1259+
1260+
// At this point, the animation should still be running (closing timeout is 7500ms ... duration * 1.5 + delay => 7.5)
1261+
$timeout.flush(5000);
1262+
1263+
expect(element.css(prefix + 'transition-delay')).toContain('3s');
1264+
1265+
// Let's flush the remaining amout of time for the timeout timer to kick in
1266+
$timeout.flush(2500);
1267+
1268+
expect(element.css(prefix + 'transition-delay')).toBe('');
1269+
}));
1270+
1271+
it("should ignore a boolean options.delay value for the closing timeout",
1272+
inject(function($animateCss, $rootElement, $timeout, $document) {
1273+
1274+
var element = jqLite('<div></div>');
1275+
$rootElement.append(element);
1276+
jqLite($document[0].body).append($rootElement);
1277+
1278+
var options = {
1279+
delay: true,
1280+
duration: 3,
1281+
to: {
1282+
height: '100px'
1283+
}
1284+
};
1285+
1286+
var animator = $animateCss(element, options);
1287+
1288+
animator.start();
1289+
triggerAnimationStartFrame();
1290+
1291+
expect(element.css(prefix + 'transition-delay')).toBeOneOf('initial', '0s');
1292+
1293+
//150% of duration
1294+
$timeout.flush(4500);
1295+
expect(element.css(prefix + 'transition-delay')).toBe('');
1296+
}));
1297+
12371298
});
12381299

12391300
describe("getComputedStyle", function() {

0 commit comments

Comments
 (0)