AngularJS：为什么在 ng-hide/show 过渡期间未附加动画 类

Question

我正在尝试做一些动画工作，但由于某些原因，在 ng-show / ng-hide 转换期间没有附加适当的 类。我附上了这个动画，表明它们没有被附加。我做错了什么？

我应该提到其他动画正在运行，例如附加到 ui-view 的动画。

CodePen 演示： http://codepen.io/anon/pen/OyoyYX?editors=101

如果您使用的是 chrome，请查看调试器浏览器。您可以看到 enter/etc 类 没有被附加。

更新：

GitHub 上的这个案例似乎是相关的： https://github.com/angular/angular.js/issues/12267

Answer 1

这是默认的 angular show/hide 行为。 ng-hide class 使用 display:none 来隐藏元素。但是 display:none 不能动画。只需使用 display:block 和 opacity:0 覆盖此功能即可制作动画。 看看我改的你的例子：

.ng-fluid{
    transition:1s linear all;
    opacity:1;
}
.ng-fluid.ng-hide{
  opacity:0;
  display:block;
}
.ng-hide-add, .ng-hide-remove{
  position: absolute;
}

http://codepen.io/anon/pen/LpJGwR?editors=101