html - 转换延迟似乎在 "height: auto;"上被忽略

Question

我知道我无法将元素的高度设置为从 0 到 auto 的动画。这对我来说很好。

当您单击标题时，下面的元素应该占据它的空间并淡入。当您再次单击时，它应该淡出然后消失。

但是:似乎忽略了 height 上的延迟。这意味着，它会立即获得高度 0 然后淡出。您可以在红色边框上非常清楚地看到这一点。

有人可以解释原因以及什么是好的解决方法吗？

HTML

<h1>Minion Ipsum</h1>
<p>[…]</p>

CSS

p {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    border: 1px solid red;
    -webkit-transition: opacity 0.55s linear, visibility 0 0.6s linear, height 0 0.7s linear;
    -moz-transition: opacity 0.55s linear, visibility 0 0.6s linear, height 0 0.7s linear;
    -ms-transition: opacity 0.55s linear, visibility 0 0.6s linear, height 0 0.7s linear;
    -o-transition: opacity 0.55s linear, visibility 0 0.6s linear, height 0 0.7s linear;
    transition: opacity 0.55s linear, visibility 0 0.6s linear, height 0 0.7s linear;
}

p.active {
    visibility: visible;
    opacity: 1;
    height: auto;
    -webkit-transition: opacity 0.55s cubic-bezier(0.405, 0.145, 0.505, 1);
    -moz-transition: opacity 0.55s cubic-bezier(0.405, 0.145, 0.505, 1);
    -ms-transition: opacity 0.55s cubic-bezier(0.405, 0.145, 0.505, 1);
    -o-transition: opacity 0.55s cubic-bezier(0.405, 0.145, 0.505, 1);
    transition: opacity 0.55s cubic-bezier(0.405, 0.145, 0.505, 1);
}

测试

http://jsfiddle.net/4wqoaek2/

Answer 1

那是因为你不能使用 height: auto 进行转换。当您将 fiddle 中的高度从 auto 更改为即 20px 时，您会看到过渡正常工作。 (在 OS X 上使用 Chrome 36)

解决方法是通过 javascript 确定正确的高度并将该样式应用于 p.active。