在SVG元素上的角度动画

Question

我想在SVG元素上使用Angular 1.2.0rc3动画ngRepeat，但是我找不到我的代码无法工作的原因。

其实，下面的代码工作完美：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"> 
    <rect ng-repeat="item in itemsList" width="10" height="50" fill="gold" data-ng-attr-x="{{$index*15}}" class="animation" /> 
</svg> 

<div> 
    <div ng-repeat="item in itemsList" class="animation">[{{$index}}] {{item}}</div> 
</div> 

.animation.ng-enter, 
.animation.ng-leave 
{ 
    transition-property: opacity; 
    transition-duration: 2000ms; 
} 

.animation.ng-enter.ng-enter-active, 
.animation.ng-leave 
{ 
    opacity: 1; 
} 

.animation.ng-enter, 
.animation.ng-leave.ng-leave-active 
{ 
    opacity: 0; 
} 

Fiddle

但对于某些神秘的原因，当我把这些线在我真正的项目，则<rect>元素不再生气了。然而，<div>元素仍然是动画。最后，当我手动添加现有元素上的.ng-leave和.ng-leave-active类（例如使用Firebug）时，我可以看到<rect>逐渐消失，如预期的那样。一个相当不错的Heisenbug，对吧？

请注意，我也在我的项目中使用jQuery。

有人已经遇到过类似的问题，或者只是对发生了什么有所了解？

Answer 1

在我的项目AngularJS和jQuery的源代码中挖了很长时间之后，看起来问题来自jQuery。事实上，我的例子工程without jQuery，但打破with it。

让我们来深入：Angular需要动态添加类到元素中以便为它们设置动画。为此，它使用addClass()方法（see the call in the code）。 addClass()的jqLite version很简单，可以在现代浏览器中使用SVG元素。 在jQuery的中，情况并非如此，如this question所示。

解决方法是，不使用jQuery可言，用jQuery SVG和他的DOM扩展，纠正问题......

<script src="jquery.js"></script> 
<script src="jquery.svg.js"></script> 
<script src="jquery.svgdom.js"></script> 
<script src="angular.js"></script> 
<script src="angular-animate.js"></script> 

...或者干脆使用的addClass()的jqLit​​e版本：

(function($) { 
    'use strict'; 

    $.fn.addClass = function (cssClasses) 
    { 
     this.each(function() 
     { 
      var element = this; 
      if (cssClasses && element.setAttribute) { 
       var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ') 
             .replace(/[\n\t]/g, " "); 

       $.each(cssClasses.split(' '), function(i, cssClass) { 
        cssClass = cssClass.trim(); 
        if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) { 
        existingClasses += cssClass + ' '; 
        } 
       }); 

       element.setAttribute('class', existingClasses.trim()); 
      } 
     }); 

     return this; 
    }; 
})(jQuery);