使用ng-show指令的angular ng-animate指令

Question

我无法使用ng-show来使用ng-show指令。这是一个JSBin简化示例：

http://jsbin.com/uquzal/1/edit

由于某些原因，我的CSS类.show-animation-setup和.show-animation-start不起作用。有任何想法吗？谢谢！

Answer 1

您需要运行AngularJS 1.1.4或更新版本，1.1.5现在是最新版本。您还需要使用一组不同的CSS规则 - 自第一次发布以来它们已经发生了变化。

Updated jsbin

修改HTML以指向1.1.5：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

更改CSS规则以使用.show-animation进行设置，将.show-animation.show-animation.active更改为活动动画：

.show-animation {
  background-color:red;
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -ms-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  opacity: 0;
}

.show-animation.show-animation-active {
  background: blue;
  opacity: 1;
}

另请注意，如果您在Firefox下进行测试，我发现存在动画不一致应用的错误。我认为它已经在主干中修复，但在发布分支上尚未提供。