Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-09 23:34:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix($animate): ensure transition-property is not changed when only keyframe animations are in use

Browse source 
Closes #3933
This commit is contained in:
Matias Niemelä 2013-09-26 14:29:18 -04:00 committed by Brian Ford
parent 448bd14445
commit 2df3c9f58d
2 changed files with 38 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ngAnimate/animate.js
View file

@ -627,8 +627,10 @@ angular.module('ngAnimate', ['ng'])
//temporarily disable the transition so that the enter styles //temporarily disable the transition so that the enter styles
//don't animate twice (this is here to avoid a bug in Chrome/FF). //don't animate twice (this is here to avoid a bug in Chrome/FF).
node.style[w3cTransitionProp + propertyKey] = 'none'; if(transitionTime > 0) {
node.style[vendorTransitionProp + propertyKey] = 'none'; node.style[w3cTransitionProp + propertyKey] = 'none';
node.style[vendorTransitionProp + propertyKey] = 'none';
}
var activeClassName = ''; var activeClassName = '';
forEach(className.split(' '), function(klass, i) { forEach(className.split(' '), function(klass, i) {
@ -637,8 +639,10 @@ angular.module('ngAnimate', ['ng'])
//this triggers a reflow which allows for the transition animation to kick in //this triggers a reflow which allows for the transition animation to kick in
element.prop('clientWidth'); element.prop('clientWidth');
node.style[w3cTransitionProp + propertyKey] = ''; if(transitionTime > 0) {
node.style[vendorTransitionProp + propertyKey] = ''; node.style[w3cTransitionProp + propertyKey] = '';
node.style[vendorTransitionProp + propertyKey] = '';
}
element.addClass(activeClassName); element.addClass(activeClassName);
var css3AnimationEvents = [w3cAnimationEvent, vendorAnimationEvent, var css3AnimationEvents = [w3cAnimationEvent, vendorAnimationEvent,

30
test/ngAnimate/animateSpec.js
View file

@ -1270,6 +1270,36 @@ describe("ngAnimate", function() {
expect(child.hasClass('ng-enter-active')).toBe(false); expect(child.hasClass('ng-enter-active')).toBe(false);
})); }));
it("should not set the transition property flag if only CSS animations are used",
inject(function($compile, $rootScope, $animate, $sniffer) {
if (!$sniffer.animations) return;
ss.addRule('.ani.ng-enter', 'my_animation 2s linear;' +
vendorPrefix + 'animation: my_animation 2s linear');
ss.addRule('.trans.ng-enter', 'transition:1s linear all;' +
vendorPrefix + 'transition:1s linear all');
var element = html($compile('<div>...</div>')($rootScope));
var child = $compile('<div class="ani">...</div>')($rootScope);
child.css('transition-property','background-color');
$animate.enter(child, element);
$rootScope.$digest();
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 2000 });
expect(child.css('transition-property')).toBe('background-color');
child.remove();
child.attr('class','trans');
$animate.enter(child, element);
$rootScope.$digest();
expect(child.css('transition-property')).not.toBe('background-color');
}));
it("should skip animations if the browser does not support CSS3 transitions and CSS3 animations", it("should skip animations if the browser does not support CSS3 transitions and CSS3 animations",
inject(function($compile, $rootScope, $animate, $sniffer) { inject(function($compile, $rootScope, $animate, $sniffer) {