高度的角度动画：自动；不起作用

Question

我想使用角度动画制作动画。我的CSS规则是：

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

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

Answer 1

使用 *作为auto，

例如：

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

Answer 2

在CSS中不可能将高度动画设置为“auto”（在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>