SVG 요소의 각진 애니메이션

Question

SVG 요소에 ngRepeat의 애니메이션을 적용하고 싶지만 각도가 1.2.0rc3인데 내 코드가 작동하지 않는 이유를 찾을 수 없습니다.

실제로, 다음 코드는 완벽하게 작동합니다 : Fiddle

그러나

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

내 실제 프로젝트의 <rect> 요소에 이러한 선 을 넣어 약간의 신비 이유로, 더 이상 움직이지 않는다. 그러나 <div> 요소는 여전히 움직입니다. 마지막으로 예를 들어 Firebug를 사용하여 .ng-leave 및 .ng-leave-active 클래스를 기존 요소에 수동으로 추가하면 <rect>이 예상대로 사라지는 것을 볼 수 있습니다. 꽤 좋은 Heisenbug, 맞죠?

내 프로젝트에는 jQuery도 사용합니다.

누군가 이미 비슷한 문제가 발생 했습니까? 아니면 어떤 일이 일어나고 있는지 간단히 알 수 있습니까?

Answer 1

내 프로젝트 인 AngularJS와 jQuery의 소스 코드에서 오랜 시간 파고 들자 jQuery에서 문제가 발생한 것으로 보입니다. 사실 내 예제는 without jQuery이지만 작동하지 않습니다. with it입니다.

더 자세히 살펴보기 : 각 요소를 애니메이션화하기 위해 요소에 클래스를 동적으로 추가해야합니다. 이를 위해 addClass() 메서드 (see the call in the code)를 사용합니다. jqLite version이 addClass() 인 것은 최신 브라우저의 SVG 요소에서 작동하기에 충분히 간단합니다. jQuery의에 해당하지 않습니다. this question으로 표시됩니다.

:

이 솔루션은 ... jQuery SVG하고 문제를 해결 그의 DOM 확장을 사용하는, 모든 jQuery를 사용하지 않는, 하나

<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()의 jqLite 버전을 사용하는 것입니다

(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);