mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
fix(ngAnimate): make sure that the class value passed into addClass/removeClass is the base class string value
This commit is contained in:
Matias Niemelä
Misko Hevery
parent
f61ff69519
commit
2430347ece
2 changed files with 153 additions and 120 deletions
|
|
@ -489,6 +489,7 @@ angular.module('ngAnimate', ['ng'])
|
|||
done:done
|
||||
});
|
||||
|
||||
var baseClassName = className;
|
||||
if(event == 'addClass') {
|
||||
className = suffixClasses(className, '-add');
|
||||
} else if(event == 'removeClass') {
|
||||
|
|
@ -504,7 +505,7 @@ angular.module('ngAnimate', ['ng'])
|
|||
|
||||
if(animation.start) {
|
||||
if(event == 'addClass' || event == 'removeClass') {
|
||||
animation.endFn = animation.start(element, className, fn);
|
||||
animation.endFn = animation.start(element, baseClassName, fn);
|
||||
} else {
|
||||
animation.endFn = animation.start(element, fn);
|
||||
}
|
||||
|
|
@ -520,17 +521,6 @@ angular.module('ngAnimate', ['ng'])
|
|||
});
|
||||
}
|
||||
|
||||
function suffixClasses(classes, suffix) {
|
||||
var className = '';
|
||||
classes = angular.isArray(classes) ? classes : classes.split(/\s+/);
|
||||
forEach(classes, function(klass, i) {
|
||||
if(klass && klass.length > 0) {
|
||||
className += (i > 0 ? ' ' : '') + klass + suffix;
|
||||
}
|
||||
});
|
||||
return className;
|
||||
}
|
||||
|
||||
function progress(index) {
|
||||
animations[index].done = true;
|
||||
(animations[index].endFn || noop)();
|
||||
|
|
@ -550,117 +540,128 @@ angular.module('ngAnimate', ['ng'])
|
|||
}
|
||||
}
|
||||
}]);
|
||||
}])
|
||||
|
||||
.animation('', ['$window','$sniffer', '$timeout', function($window, $sniffer, $timeout) {
|
||||
var noop = angular.noop;
|
||||
var forEach = angular.forEach;
|
||||
function animate(element, className, done) {
|
||||
if (!($sniffer.transitions || $sniffer.animations)) {
|
||||
done();
|
||||
} else {
|
||||
var activeClassName = '';
|
||||
$timeout(startAnimation, 1, false);
|
||||
|
||||
//this acts as the cancellation function in case
|
||||
//a new animation is triggered while another animation
|
||||
//is still going on (otherwise the active className
|
||||
//would still hang around until the timer is complete).
|
||||
return onEnd;
|
||||
}
|
||||
|
||||
function parseMaxTime(str) {
|
||||
var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : [];
|
||||
forEach(values, function(value) {
|
||||
total = Math.max(parseFloat(value) || 0, total);
|
||||
});
|
||||
return total;
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
var duration = 0;
|
||||
forEach(className.split(' '), function(klass, i) {
|
||||
activeClassName += (i > 0 ? ' ' : '') + klass + '-active';
|
||||
});
|
||||
|
||||
element.addClass(activeClassName);
|
||||
|
||||
//one day all browsers will have these properties
|
||||
var w3cAnimationProp = 'animation';
|
||||
var w3cTransitionProp = 'transition';
|
||||
|
||||
//but some still use vendor-prefixed styles
|
||||
var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation';
|
||||
var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition';
|
||||
|
||||
var durationKey = 'Duration',
|
||||
delayKey = 'Delay',
|
||||
animationIterationCountKey = 'IterationCount';
|
||||
|
||||
//we want all the styles defined before and after
|
||||
var ELEMENT_NODE = 1;
|
||||
forEach(element, function(element) {
|
||||
if (element.nodeType == ELEMENT_NODE) {
|
||||
var elementStyles = $window.getComputedStyle(element) || {};
|
||||
|
||||
var transitionDelay = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + delayKey]),
|
||||
parseMaxTime(elementStyles[vendorTransitionProp + delayKey]));
|
||||
|
||||
var animationDelay = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + delayKey]),
|
||||
parseMaxTime(elementStyles[vendorAnimationProp + delayKey]));
|
||||
|
||||
var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]),
|
||||
parseMaxTime(elementStyles[vendorTransitionProp + durationKey]));
|
||||
|
||||
var animationDuration = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + durationKey]),
|
||||
parseMaxTime(elementStyles[vendorAnimationProp + durationKey]));
|
||||
|
||||
if(animationDuration > 0) {
|
||||
animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp + animationIterationCountKey]) || 0,
|
||||
parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0,
|
||||
1);
|
||||
}
|
||||
|
||||
duration = Math.max(animationDelay + animationDuration,
|
||||
transitionDelay + transitionDuration,
|
||||
duration);
|
||||
}
|
||||
});
|
||||
|
||||
$timeout(done, duration * 1000, false);
|
||||
}
|
||||
|
||||
//this will automatically be called by $animate so
|
||||
//there is no need to attach this internally to the
|
||||
//timeout done method
|
||||
function onEnd(cancelled) {
|
||||
element.removeClass(activeClassName);
|
||||
|
||||
//only when the animation is cancelled is the done()
|
||||
//function not called for this animation therefore
|
||||
//this must be also called
|
||||
if(cancelled) {
|
||||
$animateProvider.register('', ['$window','$sniffer', '$timeout', function($window, $sniffer, $timeout) {
|
||||
var noop = angular.noop;
|
||||
var forEach = angular.forEach;
|
||||
function animate(element, className, done) {
|
||||
if (!($sniffer.transitions || $sniffer.animations)) {
|
||||
done();
|
||||
} else {
|
||||
var activeClassName = '';
|
||||
$timeout(startAnimation, 1, false);
|
||||
|
||||
//this acts as the cancellation function in case
|
||||
//a new animation is triggered while another animation
|
||||
//is still going on (otherwise the active className
|
||||
//would still hang around until the timer is complete).
|
||||
return onEnd;
|
||||
}
|
||||
|
||||
function parseMaxTime(str) {
|
||||
var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : [];
|
||||
forEach(values, function(value) {
|
||||
total = Math.max(parseFloat(value) || 0, total);
|
||||
});
|
||||
return total;
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
var duration = 0;
|
||||
forEach(className.split(' '), function(klass, i) {
|
||||
activeClassName += (i > 0 ? ' ' : '') + klass + '-active';
|
||||
});
|
||||
|
||||
element.addClass(activeClassName);
|
||||
|
||||
//one day all browsers will have these properties
|
||||
var w3cAnimationProp = 'animation';
|
||||
var w3cTransitionProp = 'transition';
|
||||
|
||||
//but some still use vendor-prefixed styles
|
||||
var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation';
|
||||
var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition';
|
||||
|
||||
var durationKey = 'Duration',
|
||||
delayKey = 'Delay',
|
||||
animationIterationCountKey = 'IterationCount';
|
||||
|
||||
//we want all the styles defined before and after
|
||||
var ELEMENT_NODE = 1;
|
||||
forEach(element, function(element) {
|
||||
if (element.nodeType == ELEMENT_NODE) {
|
||||
var elementStyles = $window.getComputedStyle(element) || {};
|
||||
|
||||
var transitionDelay = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + delayKey]),
|
||||
parseMaxTime(elementStyles[vendorTransitionProp + delayKey]));
|
||||
|
||||
var animationDelay = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + delayKey]),
|
||||
parseMaxTime(elementStyles[vendorAnimationProp + delayKey]));
|
||||
|
||||
var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]),
|
||||
parseMaxTime(elementStyles[vendorTransitionProp + durationKey]));
|
||||
|
||||
var animationDuration = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + durationKey]),
|
||||
parseMaxTime(elementStyles[vendorAnimationProp + durationKey]));
|
||||
|
||||
if(animationDuration > 0) {
|
||||
animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp + animationIterationCountKey]) || 0,
|
||||
parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0,
|
||||
1);
|
||||
}
|
||||
|
||||
duration = Math.max(animationDelay + animationDuration,
|
||||
transitionDelay + transitionDuration,
|
||||
duration);
|
||||
}
|
||||
});
|
||||
|
||||
$timeout(done, duration * 1000, false);
|
||||
}
|
||||
|
||||
//this will automatically be called by $animate so
|
||||
//there is no need to attach this internally to the
|
||||
//timeout done method
|
||||
function onEnd(cancelled) {
|
||||
element.removeClass(activeClassName);
|
||||
|
||||
//only when the animation is cancelled is the done()
|
||||
//function not called for this animation therefore
|
||||
//this must be also called
|
||||
if(cancelled) {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
enter : function(element, done) {
|
||||
return animate(element, 'ng-enter', done);
|
||||
},
|
||||
leave : function(element, done) {
|
||||
return animate(element, 'ng-leave', done);
|
||||
},
|
||||
move : function(element, done) {
|
||||
return animate(element, 'ng-move', done);
|
||||
},
|
||||
addClass : function(element, className, done) {
|
||||
return animate(element, suffixClasses(className, '-add'), done);
|
||||
},
|
||||
removeClass : function(element, className, done) {
|
||||
return animate(element, suffixClasses(className, '-remove'), done);
|
||||
}
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
function suffixClasses(classes, suffix) {
|
||||
var className = '';
|
||||
classes = angular.isArray(classes) ? classes : classes.split(/\s+/);
|
||||
forEach(classes, function(klass, i) {
|
||||
if(klass && klass.length > 0) {
|
||||
className += (i > 0 ? ' ' : '') + klass + suffix;
|
||||
}
|
||||
});
|
||||
return className;
|
||||
}
|
||||
|
||||
return {
|
||||
enter : function(element, done) {
|
||||
return animate(element, 'ng-enter', done);
|
||||
},
|
||||
leave : function(element, done) {
|
||||
return animate(element, 'ng-leave', done);
|
||||
},
|
||||
move : function(element, done) {
|
||||
return animate(element, 'ng-move', done);
|
||||
},
|
||||
addClass : function(element, className, done) {
|
||||
return animate(element, className, done);
|
||||
},
|
||||
removeClass : function(element, className, done) {
|
||||
return animate(element, className, done);
|
||||
}
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1513,4 +1513,36 @@ describe("ngAnimate", function() {
|
|||
});
|
||||
});
|
||||
|
||||
it("should provide the correct CSS class to the addClass and removeClass callbacks within a JS animation", function() {
|
||||
module(function($animateProvider) {
|
||||
$animateProvider.register('.classify', function($timeout) {
|
||||
return {
|
||||
removeClass : function(element, className, done) {
|
||||
element.data('classify','remove-' + className);
|
||||
done();
|
||||
},
|
||||
addClass : function(element, className, done) {
|
||||
element.data('classify','add-' + className);
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
inject(function($compile, $rootScope, $animate, $timeout) {
|
||||
var element = html($compile('<div class="classify"></div>')($rootScope));
|
||||
|
||||
$animate.addClass(element, 'super');
|
||||
expect(element.data('classify')).toBe('add-super');
|
||||
$timeout.flush();
|
||||
|
||||
$animate.removeClass(element, 'super');
|
||||
expect(element.data('classify')).toBe('remove-super');
|
||||
$timeout.flush();
|
||||
|
||||
$animate.addClass(element, 'superguy');
|
||||
expect(element.data('classify')).toBe('add-superguy');
|
||||
$timeout.flush();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue