두 클래스 사이를 스와핑 할 때 ng-class가있는 AngularJS 애니메이션

Question

AngularJS와 ng-class를 사용하여 클래스가 세 가지 상태로 변경 될 때 애니메이션을 적용하려고합니다. 나는 세 가지 상태에있을 수있는 div를 div의 클래스로 나타냅니다. 다음과 같이 상태는 정의 : 클래스 foo 및 bar 독점 의미 <div class="myDiv foo bar"></div>이 불가능하다

1. <div class='myDiv'></div>
2. <div class='myDiv foo'></div>
3. <div class='myDiv bar'></div>

하는 것으로. 다음과 같이 나는 NG 수준의 지침을 사용하고 있습니다 :

<div class="myDiv" ng-class="{foo: first, bar: second}"></div>

컨트롤러는 부울 첫 번째 값과 두 번째는 모두 동시에 거짓하지만, 사실이 아니 될 수 있도록합니다.

ngAnimate가 1 < -> 2와 1 < -> 3 사이의 CSS 전환을 올바르게 감지하지만 2 < -> 3이 아닌 것으로 나타났습니다. .myDiv.foo, .myDiv.bar, .myDiv.foo-add-active 등과 같은 클래스 선택기에 대한 CSS 전환 코드를 추가하려고 시도했지만 ngAnimate가이를 감지하지 못합니다 (즉, -add 및 -add-active 클래스를 추가하지 않음) 또는 애니메이션 클래스 추가되지만 전환은 발생하지 않습니다.

여기에 jsFiddle에 대한 링크가 있습니다. 두 단추 중 하나를 클릭 한 다음 다시 클릭하면 작동 전환이 표시됩니다. 버튼을 클릭 한 다음 다른 버튼을 클릭하면 전환 부족이 표시됩니다.

ngAnimate가 올바르게 선택하는 전환 효과가 있습니까? 또는 ng-class를 사용하지 않고 내 자신의 사용자 지정 지시문을 작성해야하는 경우입니까?

Answer 1

콘솔에서 .myDiv의 style 속성을 볼 경우, 당신은 (어떤 이유) ngAnimate이 none에 transition-property을 설정하고 있음을 볼 수 있습니다.

그 이유는 확실하지,하지만 CSS 내에서 transition에 !important를 때리고 수정이 :

.myDiv{ 
    width:400px; 
    height:200px; 
    background-color:red; 
    -webkit-transition: all 1s linear !important; 
    -moz-transition: all 1s linear !important; 
    -o-transition: all 1s linear !important; 
    transition: all 1s linear !important; 
} 

근무 바이올린 : http://jsfiddle.net/gd1hz5b7/

Answer 2

홀수 타이밍하지만 AngularJS와 1.3.0 단지했다 출시되었으며 이제 예상대로 작동합니다. couzzi의 대답은 버전 1.2.x에 맞습니다. 많은 사람들이 실제 사용을 더 많이 볼 때까지 1.3.0을 고수 할 것입니다. 외부 자원

변경 될 수 있습니다 (!없이 중요)

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js 원래 게시 된 바이올린은 잘 작동합니다. 완전을 기하기 위해 새로운 jsFiddle을 만들었습니다.