innerHTML 更改时的动画高度调整

Question

我有这个想法...假设我有一个包含一些文本的 DIV。

<div id="myDIV">Testing testing lorem ipsum</div>

如果我通过执行类似的操作来更改此 DIV 的内容

$("div#myDIV").html("New text New text New text New text New text New " +
  "text New text New text New text New text New text New text New text " +
  "New text New text New text New text")

DIV 的高度会改变。

是否可以对这种突然的高度变化进行动画处理以平滑过渡？

Answer 1

这不是很漂亮，但这可能是一个解决方案。这个想法是用另一个充当掩码的 div 包装您的内容 div。这样就可以在更新后计算内部 div 的高度，并将动画应用于蒙版：

// Get current height of container div.
var containerHeight = $('#container').outerHeight();

// Manually set height of container div.
$('#container').css({height: containerHeight});

// Update the html of the content div.
$('#container div').html('New text New text New text New text New text New ' +
     'text New text New text New text New text New text New text New text ' +
     'New text New text New text New text');

// Get the height of the content div.
var contentHeight = $('#container div').outerHeight();

// Animate the height of the container div to the content height.
$('#container').animate({height:contentHeight}, 1000);