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设置动画。

您可能想read this CSSTricks article寻求一些解决方法。

我建议您将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使用较小的值（接近height的值），或使用jQuery手动设置此值并匹配元素的高度。

CSS缓入缓出不适用于max-height 0和max-height auto

2 个答案: