SVG 元素上的角度动画

Posted 2023-03-06

【中文标题】SVG 元素上的角度动画

【英文标题】：Angular animation on a SVG element

【发布时间】：2013-11-05 18:30:44

【问题描述】：

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

其实下面的代码可以完美运行：

<svg xmlns="http://www.w3.org/2000/svg"  >
    <rect ng-repeat="item in itemsList"   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> 按预期逐渐消失。一个相当不错的黑森虫，对吧？

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

是否有人已经遇到过类似的问题，或者只是知道发生了什么？

【参考方案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);

【讨论】：

好好调查！希望您将来可以避免其他人为此感到头疼。