在两个类之间交换时使用ng-class的AngularJS动画

Question

使用AngularJS和ng-class，我试图在三种可能的状态之间改变类的动画。我有一个可以处于三种状态的div，由div上的类表示。州的定义如下：

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

请注意，类foo和bar是排他性的，<div class="myDiv foo bar"></div>是不可能的。我使用ng-class指令如下：

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

控制器确保第一个和第二个布尔值可以同时为假但不是真。

我发现ngAnimate正确地检测到状态1＆lt; - ＆gt; 2和1＆lt; - ＆gt; 3之间的css转换，但不是2＆lt; - ＆gt; 3。我尝试为类选择器添加css转换代码，例如.myDiv.foo，.myDiv.bar，.myDiv.foo-add-active等，但ngAnimate都没有检测到它们（意味着它没有＃＆＃ 39; t添加-add和-add-active类）或添加动画类但不会发生转换。

以下是jsFiddle演示此问题的链接。单击任一按钮然后重新单击它将显示工作转换。单击任一按钮然后单击其他按钮将显示缺少过渡。

是否有一套神奇的过渡，ngAnimate会正确接收？或者这是我需要不使用ng-class并编写自己的自定义指令的情况？

Answer 1

如果您在控制台中观看style的{​​{1}}属性，则您会看到（无论出于何种原因）ngAnimate将.myDiv设置为transition-property。

不确定原因是什么，但是要修复它，以便在CSS中的none上打!important：

transition

工作小提琴：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.min.js https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js

和原始的小提琴（没有！重要）工作正常。我已经为完整性创建了新的jsFiddle。