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;作为起点。

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

• 忘记提及 - 百分比应该适合制作动画，我的意思是固定数字。