从自动开始高度到未知高度的动画效果

Question

如有必要

，我可以尝试将其放入小提琴中，目前它只是相当复杂的代码。这是我的问题：我有一个子div，由于一些动态图像和文本内容而调整大小，还有一个容器父级，它在整个事情周围提供了一个漂亮的边框。父级有一个自动高度（或没有高度？），所以它与子高度一起流动。问题是，当我更改子高度时，我会淡出内容，然后再淡入，因此有效高度为 12px（一些边框正在进行）。父级的大小调整为 12，然后当子内容淡入时，父级将转到正确的位置。它看起来很不稳定，因为你看到这个过程在 100 毫秒左右的时间内展开。有没有办法使这个过程动画化？我想理想情况下我正在寻找类似的东西

content.startAnimation 和 endAnimation，您不必在其中指定值。

Answer 1

所以我想出了一个解决方案。基本上，由于我的 #contentdiv 是浮动的，我能够在里面放一个 #ghostWrapperdiv，它可以比它的父级 （#content） 具有更大的高度。我的 #ghostWrapper 当然是看不见的。我从这个点击开始：

// set content height on load
var contentHeight = $("#content").css("height");
$("#content").css("height", contentHeight);

然后，一旦 #ghostWrapper 内的内容自动调整了它的高度，我就将 #content 的高度设置为 #ghostWrapper

// get ghostWrapper height and set content to it
var ghostHeight = $("#ghostWrapper").css("height");
$("#content").css("height", ghostHeight);

在 CSS 中，我将高度作为 .2s 过渡，因此它可以无缝调整。希望这可以帮助将来遇到相同问题的其他人。