0

使用 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>

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

我发现 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 并编写自己的自定义指令的情况？

4

2 回答 2

1

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

不知道为什么会这样，但修复它以!important在transition你的 CSS 中拍打：

.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/

于 2014-10-14T19:10:30.680 回答
0

奇怪的时机，但 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。

于 2014-10-14T22:50:11.843 回答