3

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

实际上，以下代码可以完美运行：

<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和类时，例如使用 Firebug，我可以看到逐渐消失，正如预期的那样。一个漂亮的海森虫，对吧？.ng-leave-active<rect>

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

是否有人已经遇到过类似的问题，或者只是对正在发生的事情有所了解？

4

1 回答 1

9

在我的项目，AngularJS和jQuery的源代码中挖掘了很长时间，看来问题来自jQuery。确实，我的示例在没有 jQuery的情况下也可以工作，但被它破坏了。

让我们更深入一点：Angular 需要动态地将类添加到元素中以便为它们设置动画。为此，它使用addClass()方法（参见代码中的调用）。jqLit ​​e 版本addClass()非常简单，可以在现代浏览器中处理 SVG 元素。jQuery 的情况并非如此，如this question所示。

解决方案是，根本不使用 jQuery，使用jQuery SVG和他的 DOM 扩展，这可以解决问题……</p> 

<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>

…或者只是使用 jqLit​​e 版本addClass()：

(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);
于 2013-10-26T20:49:16.117 回答