具有高度的角度动画：自动；不起作用[重复]答案

【问题标题】：Angular-animate with height: auto; doesn't work [duplicate]具有高度的角度动画：自动；不起作用[重复]
【发布时间】：2016-07-11 19:14:01
【问题描述】：

我想使用 angular-animate 制作动画。我的 CSS 规则是：

.expanded {
    transition: all ease 0.5s;
    overflow: hidden;
}
.expanded.ng-hide {
    height: 0px;
}

例如，如果我将 height: 100px 添加到 .expanded 类，那么一切正常。但是如何在没有height 定义的情况下使其工作？我需要这个，因为.expanded 容器的内容可能不同。

【问题讨论】：

这绝对不是重复的，因为下面有一个有效的角度答案。如果您使用角度，请阅读第二个答案。

标签： javascript css angularjs

【解决方案1】：

使用 * 作为自动，

示例：

state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),

【讨论】：

@Inderjeet 如何找到有关它的文档？

【解决方案2】：

kirill.buga 的帖子帮助了我，所以在阅读了这篇帖子和其他一些帖子后，我对 kirill.buga 的帖子进行了一些修改。我摆脱了容器高度，因为它应该是自动的，减慢了过渡，然后隐藏了溢出，这样当 div 折叠时，div 内的内容将不再可见。

#container {
  max-height: 20px;
  background: red;
  overflow:hidden;
  transition: max-height 2s ease-in;
}

#container:hover {
  max-height: 800px;  
}

plunker example

【讨论】：

【解决方案3】：

在 CSS 中无法将高度设置为“自动”（在 angularJS 中也没有）。您可以尝试使用 max-height 来代替。有一些影响，但至少你可以尝试。所以动画不是从0到自动的高度，而是最大高度。您可以将 max-height 设置为比您需要的高度大得多，这样就可以了。

#container {
  max-height: 0;
  height: 100px;
  background: red;
  transition: max-height .3s ease-in;
}

#container:hover {
  max-height: 500px;  
}

<div id="container">
  Hover me
</div>

【讨论】：

到今天为止，其实是可以用angular来实现的。请阅读下面的答案。