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进行转换。当您将小提琴中的高度从auto更改为20px时，您将看到过渡正常。（在OS X上使用Chrome 36）

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

转换延迟似乎在＆＃34; height：auto;＆＃34;

1 个答案: