css ease in ease out不适用于max height 0和max height auto

我正在尝试在我的一个wordpress页面上应用一个ease-in和ease-out,如下所示:

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