3

Angular 1.2.0rc3 を使用して SVG 要素をアニメーション化したい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>要素はまだアニメーション化されています。そして最後に、たとえば Firebug を使用して、既存の要素に.ng-leaveandクラスを手動で追加すると、期待どおり、 が徐々に消えていくのがわかります。とても素敵なハイゼンバグですよね？.ng-leave-active<rect>

プロジェクトでjQueryも使用していることに注意してください。

誰かがすでに同様の問題に遭遇したことがありますか、または単に何が起こっているのかを知っていますか?

4

1 に答える 1

9

私のプロジェクトである AngularJS と jQuery のソース コードを長い間調べたところ、問題は jQuery にあるようです。実際、私の例はjQueryがなくても機能しますが、jQuery では機能しません。

さらに詳しく見てみましょう: Angular は、要素をアニメーション化するために要素にクラスを動的に追加する必要があります。そのために、addClass()メソッドを使用します (コード内の呼び出しを参照してください)。のjqLit​​e バージョンはaddClass()、最新のブラウザーで SVG 要素を操作できるほどシンプルです。この質問で示されているように、jQuery のものには当てはまりません。

解決策は、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 に答える