jquery - 动画高度以适应 DOM 元素添加到容器

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() 显式设置来修复。这可行，但有点痛苦，因为需要在调整窗口大小等时重新计算高度。