angularjs - 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

这是默认的角度显示/隐藏行为。ng-hide类使用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