使用javascript调整内容大小时自动更改高度的动画

当我添加改变内容长度的内容时，我想控制容器的自动高度变化。现在，如果我对内容应用innerHTML更改，则高度会相应更改。我想对高度变化应用过渡。我该怎么做？（我也可以使用jQuery）

在更改内容前记录高度，更改内容后记录高度，将高度设置为前一高度，并设置动画为后一高度。动画完成后，再次将高度设置为自动。您可以使用和来完成此操作

在JSFIDLE上。

var文本=[
“这只是一些示例文本，用于演示在内容更改时设置高度动画。”，
“更短。”
];
var div=$（'div'）。单击（更改内容）；
函数changeContent（）{
var oldHeight=分区高度（）；
text.push（div.text（））；
div.text（text.shift（））；
var newHeight=分区高度（）；
分区高度（旧高度）；
div.animate（{height:newHeight}，'fast'，function（）{
分区高度（“自动”）；
});
}

div{
宽度：150px；
背景：浅灰色；
溢出y：隐藏；
}

这是一些示例内容。

在容器内向div添加append时：

$('#container').children().first().append(somethingNew);

基于

我在更改高度时禁用按钮，并添加淡入效果。此解决方案对于更新产品过滤器等非常有用

此外，我还检查了

框大小

属性。如果是

框大小调整

，则我将通过而不是获得

新高度

，以防止新内容具有相同高度时的高度波动。您可以检查这种情况，例如通过将

random

变量设置为值

5

。原因是

.height（）

将始终返回内容高度，而不管CSS框大小属性的值如何

$（“#按钮”）。单击（函数（）{
var$按钮=$（此），
buttonOriginalText=$button.html（）；
$button.prop（'disabled'，true）.html（'updateing…'）；
$（“#内容”）。设置动画({
不透明度：0
}，“快速”，函数（）{
var newHeight，
$content=$（这个），
oldHeight=$content.height（）；
$content.html（getRandomContent（））；
newHeight=（'border-box'==$content.css（'box-sizing'）？$content.outerHeight（）：$content.height（））；
$content.height（oldHeight）.动画({
高度：新高度，
不透明度：1
}，'slow'，function（）{
$content.height（'auto'）；
$button.prop（'disabled'，false）.html（buttonOriginalText）；
});
});
});
函数getRandomContent（）{
var random=1+Math.round（Math.random（）*11），//1..12
段落=“段落
”；
返回段落。重复（随机）；
}

*{
框大小：边框框；/*注释掉以测试“内容框”*/
字体：16px Helvetica，“无衬线”；
}
.内容{
计数器复位：内容；
填充：6px 18px；
}
.内容p{
反增量：内容；
}
.内容p：之后{
内容：“计数器（内容）”；
}
.内容框{
边框：2倍纯红；
利润上限：24px；
最大宽度：220px；
}

更新内容
设置调整内容大小时自动高度的动画。

div是如何在文本更新和高度临时重置为原始高度之间不闪烁的？@charliesneath：虽然现在的浏览器实际上通常是多线程的，但浏览器在某些方面仍然像是单线程的，JavaScript阻止了UI。特别是，当JavaScript仍在执行过程中时，不会重新呈现页面。

 $('#container').animate({height:$('#container').children().first().outerHeight()});

$('#container').children().first().append(somethingNew);