javascript在获取新内容时设置高度动画

我有一根像

content = "content1<br/>content2<br/>"

我希望

内容的容器在显示新内容时设置高度动画

我试过了

document.getElementById("detail").innerHTML = content;
$("detail").animate({
     height: 'auto'
}, 1000);

因为jQuery.animate（）只适用于数字，所以它只是在没有设置动画的情况下出现

例如，您当前的高度是：
20px
，在动画功能中设置为
30px

jQuery将在声明的时间内上升20到30，并将其连续设置为元素，直到达到30为止

另一方面，CSS的动作比JS快，使元素自动变高

因此，必须使用数字来设置新高度的动画（之前的高度也必须是数字），或者可以使用CSS3变换

此处
将动画设置为未知高度是一个棘手的问题。我将尝试使用CSS转换和javascript帮助函数的组合来计算新的宽度

当然，您仍然可以只使用
设置动画
，但仍然需要计算新高度并设置动画到新高度


var content=“content1
content2
”；
var height=getHeight（content）；
$（“#细节”）.css（'max-height'，height）.html（内容）；
setTimeout（函数（）{
content+=“content3
”；
var height=getHeight（content）；
$（“#细节”）.css（'max-height'，height）.html（内容）；
}, 1000);
函数getHeight（str）{
var$tmp=$（“”）.html（content.css（{position:'absolute'，top:-1000}）.appendTo（'body'），
高度=$tmp.height（）+10+'px'；
$tmp.remove（）；
返回高度；
}
#详细信息{
背景：#EEE；
溢出：隐藏；
最大高度：0；
过渡：最大高度1s；
}

您不能将高度动画设置为“自动”，它需要在固定的px或%中。首先，您给我们的代码介于javascript和jQuery之间。决定你在用什么，并且只使用这个。
document.getElementById("detail").innerHTML = content;
$("detail").animate({
     height: 'auto'
}, 1000);