CSS易进易出不适用于最大高度0和最大高度自动

Question

我正试图在我的一个wordpress页面上应用轻松输入和轻松输出，如下所示：

.section1 {
max-height: 0px;
overflow: hidden;
transition: max-height 0.15s ease-out;
}
.section1.show {
max-height: auto;
overflow: visible;
transition: max-height 0.25s ease-in;
}

然而，这不起作用，它不容易进出。。。。我做错了什么？

我调整了我的代码如下：

.vc_section {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
.section1.show {
max-height: 500px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}

轻松入内有效，轻松出外无效。当用户点击一个按钮时，我正试图让工作变得轻松起来：

$('.architectural-films').bind('click', function(){
if ($(".section1").hasClass("show")) {
$('.section1').removeClass('show');
}
else
{
$('.section1').addClass('show');
}
return false;
});

Answer 1

不幸的是，auto值不能通过纯CSS设置动画。

您可能想阅读这篇CSSCtricks文章，了解一些解决方法。

我建议使用jQuery的slideDown()，并使用您想要的宽松版：(

Answer 2

它运行良好，但由于max-height的大值，您看不到所需的效果。基本上，ease-in会对500px的值产生影响，但如果您的内容高度很小，您将看不到这一点。

下面是一个可以更好理解的基本示例：

.box {
background:red;
height:20px;
width:100px;
display:inline-block;
vertical-align:top;
}
/*your code*/
.box {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
html:hover .box {
max-height: 100px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}

<div class="box">
</div>
<div class="box" style="height:100px;">
</div>

正如你所看到的，第二个效果很好，因为它的高度足够大，可以看到与第一个不同的效果。

为了避免这种情况，您需要为max-height使用一个较小的值(接近高度的值(，或者使用jQuery手动设置该值并匹配元素高度。