Question

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

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

Answer 1

你可以通过CSS获得你想要的效果。而不是动画div的高度，为max-height属性设置动画。将悬停上的max-height设置为您认为的max-height（过度体贴）。原因是，如果您将max-height设置为10000px并且div的高度为1000px，并且您将动画的持续时间设置为1秒，则会清除内容0.1秒后的高度，即使过渡结束，它也会出现，因为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

执行此操作的一种方法是为内容高度设置动画。然后父母的身高将自动跟随。这是否适合您取决于内容高度如何变化，但如果内容是固定高度，那么应该可以使用以下CSS：

.container {
    width: 500px;
    height: auto;
    border: 2px solid blue;
}

.container .content {
    with: 100%;
    height: 200px;
    transition: 1s height;
}

当您使用javascript更改.content的高度时，.container的高度也会被设置为动画。

您可以在此处查看此操作：http://jsfiddle.net/MBD6z/

我不确定这是否适用于您的情况......我需要更多关于内容如何变化的详细信息，但这是实现目标的一种方式。

Answer 3

我想我找到了一个相对不错的解决方法。为了使它工作，必须满足以下要求：子元素在DOM中（加载文档或动态）但隐藏。

首先，我需要计算父母在其最终状态时的身高，即已经显示的是孩子。我第一次来this method来计算隐藏孩子的身高，但是这种方法有一个根本的缺陷：如果你孩子的宽度在某些情况下大于你的父母，那么将子放在父级中时，子将被包装。在这种情况下，此方法不会精确计算高度，因为绝对定位的元素不考虑其父元素的宽度。

因此，准确计算高度的唯一方法是将子项实际放在其父级中。以下是诀窍：

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

我首先在孩子身上调用fadeIn以将其放入DOM的流程中，然后立即抓住孩子的高度以及其他任何东西以计算父母应该的正确身高，并设置父亲身高的动画。较短的动画范围，例如.animate（{height：myHeight}，200）。

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

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

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

3 个答案: