13

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

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

4

3 回答 3

8

只需 CSS 即可获得您想要的效果。而不是动画 div 的高度，动画max-height属性。将max-height悬停上的 设置为您认为的max-height（过分体贴）。原因是，如果您将 div 设置max-height为10000px和高度，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;   
}
于 2013-06-10T21:19:24.973 回答
1

一种方法是为内容高度设置动画。然后父母的身高将自动跟随。这是否对您有用取决于内容高度的变化方式，但如果内容是固定高度，则应该可以使用以下 CSS：

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

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

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

你可以在这里看到这个：http: //jsfiddle.net/MBD6z/

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

于 2013-06-10T18:44:56.583 回答
1

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

首先我需要计算父母的高度，因为它处于最终状态，即已经显示了孩子。我第一次来这个方法是为了计算隐藏的child的高度，但是这个方法有个根本的缺陷：如果你的child的宽度在某些情况下大于你的parent，那么child里面的内容放在里面的时候会被包裹起来父母。在这种情况下，此方法不会准确计算高度，因为绝对定位的元素不考虑其父元素的宽度。

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

$(".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在父级上进行设置可以避免在某些情况下动画期间内容溢出。

于 2013-06-10T21:59:36.037 回答