Question

我想在内容高度发生变化时动画容器元素高度的变化。我在尝试：

.container {
  height: auto
  background: #eee
  -webkit-transition: height 0.4s ease-in-out;
  -moz-transition: height 0.4s ease-in-out;
  -ms-transition: height 0.4s ease-in-out;
  -o-transition: height 0.4s ease-in-out;
  transition: height 0.4s ease-in-out;
}

然后致电：

$('.container').html('...');

但是，每次容器自动捕捉。如果我打电话：

$('.container').height(400);

动画发生。但是，我不确定内容的大小。有关如何在更改内容时触发它的想法吗？

Answer 1

我可能会错过一个技巧，但今晚我一直在做同样的事情。

您无法设置自动高度（甚至是最小高度）或转换中断的动画。

你可以使用max-height：0;作为起点。

唯一阻止我的是高度问题 - 幸运的是我的元素是高度固定的。

忘记提及 - 动画的百分比应该没问题，我的意思是固定数字。

Answer 2

通过计算内部内容的高度并在父级上使用height（）显式设置来修复。这有效，但有点痛苦，因为需要在窗口调整大小等时重新计算高度。

动画高度适合将DOM元素添加到容器中

2 个答案: