AngularJS - CSS3 高度动画（自动） - 有时有效答案

【问题标题】：AngularJS - CSS3 animation of height (auto) - sometimes worksAngularJS - CSS3 高度动画（自动） - 有时有效
【发布时间】：2013-05-05 13:53:20
【问题描述】：

我想为一个不知道实际高度的元素制作动画，这就是我使用trick 和max-height 的原因。

css 非常简单：

.animate-enter-setup, .animate-leave-setup {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  overflow: hidden;
}

.animate-enter-setup {
  opacity:0;
  max-height: 0;
}
.animate-enter-setup.animate-enter-start {
  max-height: 200px;
  opacity:1;
}

.animate-leave-setup{
  opacity:1;
  max-height: 200px;
}
.animate-leave-setup.animate-leave-start {
  opacity:0;
  max-height: 0;
}

在此处的示例中： http://plunker.co/edit/AoirGQoOKsflunxj9RGV?p=preview leave 动画获取仅在项目未完成之前的 enter 动画时应用。当项目确实完成enter 动画时，leave 动画不会被应用（它作为一个类执行，但没有视觉效果）。

我怀疑 CSS 有问题，而不是角度问题。但我不知道那会是什么。

【问题讨论】：

仅供参考：您的两个链接都已损坏

标签： angularjs css-transitions css-animations

【解决方案1】：

事实证明，如果你想使用 max-height 技巧，那么你想要动画的元素必须定义 max-height 和 overflow:hidden（不仅在动画类上）

这里奇怪的是setup动画类即使在元素上也不会被浏览器应用。

更新示例：http://plunker.co/edit/qnEFDhAyGqhsJdCGrF71?p=preview

我认为这可能是 angular 或 chrome 中的错误。

【讨论】：