代码之家 › 专栏 › 技术社区 › user979331

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

css-transitions css3 css jquery

-1

user979331 · 技术社区 · 6 年前

我正在尝试在我的一个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;
        });

2 回复 | 直到 6 年前

1

Itay Ganor 6 年前

不幸的是, auto 值不能通过普通CSS动画。

你可能想 read this CSSTricks article 一些解决办法。

我建议使用jquery的 slideDown() 用你想要的放松:)

2

0

Temani Afif 6 年前

它工作得很好,但是你不会看到你需要的效果,因为 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>

正如你所看到的,安逸对第二种工作很好,因为它的高度大到能够看到不同于第一种效果的效果。

为了避免这种情况,您需要使用一个较小的值 最大高度 (接近height的值)或使用jquery手动设置此值并匹配元素高度。