angularjs - 带有 ng-show 指令的角度 ng-animate 指令

Question

我无法让 ng-animate 与 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 规则——它们自第一个版本以来已经改变。

更新了 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 下进行测试，我发现存在动画应用不一致的错误。我认为它已经在主干中修复，但在发布分支上尚不可用。