jquery - CSS ease-in ease-out 不适用于 max-height 0 和 max-height auto

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;
        });

标签： jquerycsscss-transitions

Answer 1

不幸的是，auto值不能通过纯 CSS 进行动画处理。

您可能想阅读这篇 CSSTricks 文章以了解一些变通方法。

我会推荐使用 jQuery 的slideDown()你想要的缓动 :)