angularjs - ngShow 不添加 ng-show 类

Question

ng-show="boolDefaultIsFalse"我正在尝试为最初被属性隐藏的元素创建动画。

当我将布尔值触发为 true 时，会显示元素，但不会播放动画。

这是因为元素永远不会获得ng-show类。它确实从一ng-hide堂课开始。但是，一旦我显示该元素，该类就会被删除，并且不会添加新的类。

这是我的问题的演示：http: //plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05

有人知道如何解决这个问题吗？

---

更新

我已经更新了 Plunker。

我添加了ng-class将ng-show类手动添加到div. 但是动画仍然没有播放。

Answer 1

当您包含 ngAnimate 作为模块的依赖项时：

var app = angular('app', ['ngAnimate']);

当应用 ng-show/ng-hide 指令时，Angular 将自动添加/删除以下 CSS 类：

ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active

要利用这一点，请将您的 CSS 动画样式添加到这些类中。

这是一个演示

Answer 2

从 ng-show 的角度文档：

通过在元素上移除或添加 ng-hide CSS 类来显示或隐藏元素。

如果你想动态添加/删除一个类，你应该使用 ng-class。