将高度设置为零后CSS转换失败答案

【问题标题】：Css transition fails after setting height to zero将高度设置为零后CSS转换失败
【发布时间】：2014-01-28 20:57:19
【问题描述】：

我在文章元素中的 div 上有展开和折叠动画。

基于这个小提琴代码：csstransitions demo

当 div 框展开（“div.expandable”）时，我不想将高度硬编码（锁定）为特定值，因此我通过删除高度值来重置它：el.css("height", ""); 当动画完成。

我恢复高度（回到 136 像素），然后再次将其设置为“0”以用于折叠/关闭动画。重置后没有折叠动画回到height: 0。但是如果我在展开动画之后将高度保留为 136px，那么折叠动画就可以正常工作。

如果您注释掉el.css("height", "");，则动画效果很好。

height 是否必须始终设置为特定值？如果是这样，则在调整浏览器宽度时没有高度响应。

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

在 CSS 中将高度/宽度转换为自动/从自动转换是很棘手的，这实际上是您在删除高度值时所做的事情。有一个技巧可以解决可能对您有所帮助的问题：它涉及克隆元素，将高度和宽度设置为自动，测量重复元素的高度，然后将其删除，从而使您具有灵活的高度/宽度和仍然为它们制作动画。示例见http://darcyclarke.me/development/fix-jquerys-animate-to-allow-auto-values-2/。

【讨论】：

我有一个运行良好的 jQuery 后备。我希望 csstransitions 成为主要解决方案，主要是因为硬件加速。
有道理，如果可以的话，硬件加速总是好的。在这种情况下，chrona 的答案将是您正在寻找的。但是，正确设置过渡持续时间很棘手，尤其是在您的内容大小可变的情况下。

【解决方案2】：

设置 max-height（有一个高度，你的文本永远不会使用）而不是 height：

$(".preface").click(function(){
    var el = $(this).parent().find(".expandable");
    el.toggleClass("expanded");
});

CSS

.expandable {
    transition: max-height 0.5s ease-in-out;
    background-color: #f1f1f1;
    overflow: hidden;
    max-height: 0;
}

.expanded {
    max-height: 2000px;
}

这是一个fiddle，其中包含您的更新代码。

.expandable 不再需要style="height: 0"。不幸的是，此解决方案会弄乱您的过渡持续时间，因为它计算的是最大高度而不是高度所需的时间。

【讨论】：

确实如此。但是动画不好看。我将尝试仅对折叠动画使用 max-height。