当在两个类之间交换时，AngularJS动画带有ng类

Question

使用AngularJS和ng类，当类在三种可能的状态之间变化时，我试图设置动画。我有一个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类指令如下：

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

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

我发现ngAnimate可以正确地检测状态1<-->之间的css转换2和1<-->3，但不是从2<-->3.我尝试为.myDiv.foo、.myDiv.bar、.myDiv.foo-add-active等类选择器添加css转换代码，但要么ngAnimate没有检测到它们（意味着它没有添加-add和-add活动类），要么添加了动画类，但没有发生转换。

这里有一个jsFiddle的链接来演示这个问题。单击任一按钮，然后再次单击，将显示工作转换。单击其中一个按钮，然后单击另一个按钮显示缺少转换。

有没有一组神奇的过渡，ngAnimate会正确地拾取？还是在这种情况下，我不需要使用ng类并编写自己的自定义指令？

Answer 1

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

不确定为什么会这样，但修复了在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.min.jshttps://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js

原来张贴的小提琴（没有！important）工作得很好。为了完整性，我创建了一个新的jsFiddle。