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

【问题标题】：AngularJS animations with ng-class when swapping between two classes在两个类之间交换时使用 ng-class 的 AngularJS 动画
【发布时间】：2014-10-15 06:50:11
【问题描述】：

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

<div class='myDiv'></div>
<div class='myDiv foo'></div>
<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>

控制器确保布尔值 first 和 second 可以同时为假但不为真。

我发现 ngAnimate 可以正确检测到状态 12 和 13 之间的 css 转换，但不能从 23 中检测到。我尝试为 .myDiv.foo、.myDiv.bar、.myDiv.foo-add-active 等类选择器添加 css 转换代码，但是 ngAnimate 没有检测到它们（意味着它没有添加 -add 和 -add-active classes) 或添加了动画类但没有发生过渡。

这是一个指向jsFiddle 的链接，用于演示该问题。单击任一按钮，然后重新单击它会显示工作转换。单击任一按钮，然后单击另一个按钮显示缺少过渡。

ngAnimate 是否有一组神奇的过渡可以正确拾取？或者这是我不需要使用 ng-class 并编写自己的自定义指令的情况？

【问题讨论】：

标签： angularjs css-transitions angularjs-animation

【解决方案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/

【讨论】：

这绝对有效，并且对于 Angular 1.2.x 是必需的。事实证明，此行为在 1.3.0 中已修复，因此我添加了包含该信息的答案以获得更好的可见性。

【解决方案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

原始发布的小提琴（没有！important）工作正常。为了完整起见，我创建了一个新的jsFiddle。

【讨论】：