kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-01-12 22:45:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ngAnimate): do not use jQuery class API

Browse Source 
jQeury's class API causes problems with SVG elements --- using jqLite in all cases
prevents issues.

Closes #10024
Closes #10329
This commit is contained in:
Caitlin Potter
2014-12-04 13:38:52 -05:00
parent cb192293f4
commit 40a537c25f
2 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/ngAnimate/animate.js
View File

@@ -474,10 +474,12 @@ angular.module('ngAnimate', ['ng'])
return extractElementNode(elm1) == extractElementNode(elm2);
}
var $coreAnimate;
$provide.decorator('$animate',
['$delegate', '$$q', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document', '$templateRequest',
function($delegate, $$q, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document, $templateRequest) {
$coreAnimate = $delegate;
$rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
// Wait until all directive and route-related templates are downloaded and
@@ -1380,11 +1382,9 @@ angular.module('ngAnimate', ['ng'])
//the ng-animate class does nothing, but it's here to allow for
//parent animations to find and cancel child animations when needed
element.addClass(NG_ANIMATE_CLASS_NAME);
$delegate.$$addClassImmediately(element, NG_ANIMATE_CLASS_NAME);
if (options && options.tempClasses) {
forEach(options.tempClasses, function(className) {
element.addClass(className);
});
$delegate.$$addClassImmediately(element, options.tempClasses);
}
var localAnimationCount = globalAnimationCounter++;
@@ -1460,9 +1460,7 @@ angular.module('ngAnimate', ['ng'])
closeAnimation.hasBeenRun = true;
if (options && options.tempClasses) {
forEach(options.tempClasses, function(className) {
element.removeClass(className);
});
$delegate.$$removeClassImmediately(element, options.tempClasses);
}
var data = element.data(NG_ANIMATE_STATE);
@@ -1523,7 +1521,7 @@ angular.module('ngAnimate', ['ng'])
}
if (removeAnimations || !data.totalActive) {
element.removeClass(NG_ANIMATE_CLASS_NAME);
$delegate.$$removeClassImmediately(element, NG_ANIMATE_CLASS_NAME);
element.removeData(NG_ANIMATE_STATE);
}
}
@@ -1764,14 +1762,14 @@ angular.module('ngAnimate', ['ng'])
var staggerCacheKey = cacheKey + ' ' + staggerClassName;
var applyClasses = !lookupCache[staggerCacheKey];
applyClasses && element.addClass(staggerClassName);
applyClasses && $coreAnimate.$$addClassImmediately(element, staggerClassName);
stagger = getElementAnimationDetails(element, staggerCacheKey);
applyClasses && element.removeClass(staggerClassName);
applyClasses && $coreAnimate.$$removeClassImmediately(element, staggerClassName);
}
element.addClass(className);
$coreAnimate.$$addClassImmediately(element, className);
var formerData = element.data(NG_ANIMATE_CSS_DATA_KEY) || {};
var timings = getElementAnimationDetails(element, eventCacheKey);
@@ -1779,7 +1777,7 @@ angular.module('ngAnimate', ['ng'])
var animationDuration = timings.animationDuration;
if (structural && transitionDuration === 0 && animationDuration === 0) {
element.removeClass(className);
$coreAnimate.$$removeClassImmediately(element, className);
return false;
}
@@ -1851,7 +1849,7 @@ angular.module('ngAnimate', ['ng'])
}
if (!staggerTime) {
element.addClass(activeClassName);
$coreAnimate.$$addClassImmediately(element, activeClassName);
if (elementData.blockTransition) {
blockTransitions(node, false);
}
@@ -1861,7 +1859,7 @@ angular.module('ngAnimate', ['ng'])
var timings = getElementAnimationDetails(element, eventCacheKey);
var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration);
if (maxDuration === 0) {
element.removeClass(activeClassName);
$coreAnimate.$$removeClassImmediately(element, activeClassName);
animateClose(element, className);
activeAnimationComplete();
return;
@@ -1896,7 +1894,7 @@ angular.module('ngAnimate', ['ng'])
var staggerTimeout;
if (staggerTime > 0) {
element.addClass(pendingClassName);
$coreAnimate.$$addClassImmediately(element, pendingClassName);
staggerTimeout = $timeout(function() {
staggerTimeout = null;
@@ -1907,8 +1905,8 @@ angular.module('ngAnimate', ['ng'])
blockAnimations(node, false);
}
element.addClass(activeClassName);
element.removeClass(pendingClassName);
$coreAnimate.$$addClassImmediately(element, activeClassName);
$coreAnimate.$$removeClassImmediately(element, pendingClassName);
if (styles) {
if (timings.transitionDuration === 0) {
@@ -1935,8 +1933,8 @@ angular.module('ngAnimate', ['ng'])
// timeout done method.
function onEnd() {
element.off(css3AnimationEvents, onAnimationProgress);
element.removeClass(activeClassName);
element.removeClass(pendingClassName);
$coreAnimate.$$removeClassImmediately(element, activeClassName);
$coreAnimate.$$removeClassImmediately(element, pendingClassName);
if (staggerTimeout) {
$timeout.cancel(staggerTimeout);
}
@@ -2024,7 +2022,7 @@ angular.module('ngAnimate', ['ng'])
}
function animateClose(element, className) {
element.removeClass(className);
$coreAnimate.$$removeClassImmediately(element, className);
var data = element.data(NG_ANIMATE_CSS_DATA_KEY);
if (data) {
if (data.running) {

10
test/ngAnimate/animateSpec.js
View File

@@ -5316,7 +5316,7 @@ describe("ngAnimate", function() {
//jQuery doesn't handle SVG elements natively. Instead, an add-on library
//is required which is called jquery.svg.js. Therefore, when jQuery is
//active here there is no point to test this since it won't work by default.
if (!$sniffer.transitions || !_jqLiteMode) return;
if (!$sniffer.transitions) return;
ss.addRule('circle.ng-enter', '-webkit-transition:1s linear all;' +
'transition:1s linear all;');
@@ -5336,13 +5336,13 @@ describe("ngAnimate", function() {
var child = element.find('circle');
expect(child.hasClass('ng-enter')).toBe(true);
expect(child.hasClass('ng-enter-active')).toBe(true);
expect(jqLiteHasClass(child[0], 'ng-enter')).toBe(true);
expect(jqLiteHasClass(child[0], 'ng-enter-active')).toBe(true);
browserTrigger(child, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
expect(child.hasClass('ng-enter')).toBe(false);
expect(child.hasClass('ng-enter-active')).toBe(false);
expect(jqLiteHasClass(child[0], 'ng-enter')).toBe(false);
expect(jqLiteHasClass(child[0], 'ng-enter-active')).toBe(false);
}));