Skip to content

Commit f92d3d9

Browse files
committed
fix($animate): run CSS animations before JS animations to avoid style inheritance
If a JS animation is run before a CSS animation then the JS animation may end up writing style data to the element. If any transition or animation style data is written then it may end up being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element. If the CSS animation is run before the JS animation then, if there are no transitions on the style attribute nor within the global CSS on the page then nothing will happen and the JS animation can work as expected. Closes angular#6675
1 parent 3f2d756 commit f92d3d9

File tree

2 files changed

+31
-2
lines changed

2 files changed

+31
-2
lines changed

src/ngAnimate/animate.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -332,9 +332,12 @@ angular.module('ngAnimate', ['ng'])
332332
//operation which performs CSS transition and keyframe
333333
//animations sniffing. This is always included for each
334334
//element animation procedure if the browser supports
335-
//transitions and/or keyframe animations
335+
//transitions and/or keyframe animations. The default
336+
//animation is added to the top of the list to prevent
337+
//any previous animations from affecting the element styling
338+
//prior to the element being animated.
336339
if ($sniffer.transitions || $sniffer.animations) {
337-
classes.push('');
340+
matches.push($injector.get(selectors['']));
338341
}
339342

340343
for(var i=0; i < classes.length; i++) {

test/ngAnimate/animateSpec.js

+26
Original file line numberDiff line numberDiff line change
@@ -721,6 +721,32 @@ describe("ngAnimate", function() {
721721
})
722722
});
723723

724+
it("should always perform the CSS animation before the JS animation", function() {
725+
var log = [];
726+
module(function($animateProvider) {
727+
//CSS animation handler
728+
$animateProvider.register('', function() {
729+
return {
730+
leave : function() { log.push('css'); }
731+
}
732+
});
733+
//custom JS animation handler
734+
$animateProvider.register('.js-animation', function() {
735+
return {
736+
leave : function() { log.push('js'); }
737+
}
738+
});
739+
});
740+
inject(function($animate, $rootScope, $compile, $sniffer) {
741+
if(!$sniffer.transitions) return;
742+
743+
element = $compile(html('<div class="js-animation"></div>'))($rootScope);
744+
$animate.leave(element);
745+
$rootScope.$digest();
746+
expect(log).toEqual(['css','js']);
747+
});
748+
});
749+
724750

725751
describe("Animations", function() {
726752

0 commit comments

Comments
 (0)