jquery - SVG 元素上的 Angular 动画

Question

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

实际上，下面的代码可以完美运行:

<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 )。 jqLite version addClass() 非常简单，可以在现代浏览器中处理 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);