JQuery/CSS3:动画自动高度变化

Question

我需要在父容器发生变化时为其设置动画高度.问题是它的高度设置为自动,因此高度取决于内容.我想要实现的最终目标是,每当高度因内容发生变化而发生变化时,可以通过jQuery或CSS3对变化进行动画处理.

我搜索了类似的主题,但我发现的是如何将高度从固定值设置为"自动":(

Answer 1

你可以用CSS获得你想要的效果.而不是动画div的高度,动画max-height属性.将max-height悬停设置为您认为的max-height(过度体贴).其中的原因是,如果将max-height要10000px和DIV的高度1000px和你0.1S后设置动画为1秒,将清除了内容高度的持续时间和它就会出现asthough过渡结束后,因为max-height价值观1000px无效.因此,max-height对于更一致的动画,更准确更好.

http://jsfiddle.net/2QcCC/2/

.container {
    height: auto;
    min-height: 100px;
    max-height: 100px;
    transition: 1s max-height;
    overflow: hidden;
}
.container:hover {
    max-height: 4000px;   
}

Answer 2

我想我已经找到了一种效果相对较好的解决方法。要使其工作，必须满足以下要求：子元素位于 DOM 中（随文档加载或动态加载）但隐藏。

首先，我需要计算父级的高度，因为它处于最终状态，即子级已经显示。我首先想到这个方法是为了计算隐藏子项的高度，但是这个方法有一个根本性的缺陷：如果你的子项的宽度在某些情况下大于你的父项，那么子项中的内容在放置在父母。在这种情况下，此方法将无法准确计算高度，因为绝对定位元素不考虑其父元素的宽度。

因此，准确计算高度的唯一方法是将子级实际放置在其父级内部。下面是技巧：

$(".content").fadeIn(800);
var contentHeight = $(".content").outerHeight(true);
$(".parent").animate({"height", contentHeight}, 200);

我首先对子级调用 fadeIn 将其放入 DOM 流中，然后立即获取子级的高度以及其他任何内容来计算父级应有的正确高度，并以较短的动画设置父级高度的动画跨度，例如 .animate({height: myHeight}, 200)。

结果是一个平滑的动画容器，其高度取决于其子内容。

这是小提琴，您可以看到除了父容器的初始高度之外，页面上的任何位置都没有设置固定高度。这个小提琴使用 CSS3 动画和 jQuery，但它们在大多数情况下是可以互换的。请注意，您仍然需要.outerHeight(true)获取内容的总大小（包括其边距），并且overflow: hidden在父级上进行设置可以避免在某些情况下动画期间发生内容溢出。