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

Commit 93901bd

Browse files
committed
fix($animate): ensure ms durations are properly rounded
Closes #5113 Closes #5162
1 parent d802ed1 commit 93901bd

File tree

2 files changed

+28
-1
lines changed

2 files changed

+28
-1
lines changed

src/ngAnimate/animate.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -865,6 +865,7 @@ angular.module('ngAnimate', ['ng'])
865865
var NG_ANIMATE_CSS_DATA_KEY = '$$ngAnimateCSS3Data';
866866
var NG_ANIMATE_FALLBACK_CLASS_NAME = 'ng-animate-start';
867867
var NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME = 'ng-animate-active';
868+
var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
868869

869870
var lookupCache = {};
870871
var parentCounter = 0;
@@ -1118,14 +1119,19 @@ angular.module('ngAnimate', ['ng'])
11181119
event.stopPropagation();
11191120
var ev = event.originalEvent || event;
11201121
var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now();
1122+
1123+
/* Firefox (or possibly just Gecko) likes to not round values up
1124+
* when a ms measurement is used for the animation */
1125+
var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
1126+
11211127
/* $manualTimeStamp is a mocked timeStamp value which is set
11221128
* within browserTrigger(). This is only here so that tests can
11231129
* mock animations properly. Real events fallback to event.timeStamp,
11241130
* or, if they don't, then a timeStamp is automatically created for them.
11251131
* We're checking to see if the timeStamp surpasses the expected delay,
11261132
* but we're using elapsedTime instead of the timeStamp on the 2nd
11271133
* pre-condition since animations sometimes close off early */
1128-
if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && ev.elapsedTime >= maxDuration) {
1134+
if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
11291135
activeAnimationComplete();
11301136
}
11311137
}

test/ngAnimate/animateSpec.js

+21
Original file line numberDiff line numberDiff line change
@@ -2852,5 +2852,26 @@ describe("ngAnimate", function() {
28522852
$timeout.flush();
28532853
});
28542854
});
2855+
2856+
it('should round up long elapsedTime values to close off a CSS3 animation',
2857+
inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout, $window) {
2858+
if (!$sniffer.animations) return;
2859+
2860+
ss.addRule('.millisecond-transition.ng-leave', '-webkit-transition:510ms linear all;' +
2861+
'transition:510ms linear all;');
2862+
2863+
var element = $compile('<div class="millisecond-transition"></div>')($rootScope);
2864+
$rootElement.append(element);
2865+
jqLite($document[0].body).append($rootElement);
2866+
2867+
$animate.leave(element);
2868+
$rootScope.$digest();
2869+
2870+
$timeout.flush();
2871+
2872+
browserTrigger(element, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 0.50999999991 });
2873+
2874+
expect($rootElement.children().length).toBe(0);
2875+
}));
28552876
});
28562877
});

0 commit comments

Comments
 (0)