html - 仅以一种方式滞后过渡

Question

我创建了一个简单、纯 CSS 的下拉菜单。我面临着一个奇怪的滞后问题。当菜单向下滚动时，过渡是平滑的，但在相反的方向上，在动画开始之前会有大约 1 秒的延迟。

HTML:

<input type="checkbox" id="switch" name="switch">
<label for="switch" id="switch-button">Click me!</label>

<div id="txt">
<p>Menu element 1</p>
<p>Menu element 2</p>
<p>Menu element 3</p>
<p>Menu element 4</p>
</div>

CSS:

#switch        { display: none; }
#switch-button { display: block; }
#txt           { max-height: 400px; }

#switch ~ #txt {
    transition: 1s max-height 0s;
}
#switch:not(:checked) ~ #txt {
    max-height: 0px;
    overflow: hidden;
}
#switch:checked ~ #txt {
    max-height: 400px;
}

https://jsfiddle.net/s1237n9h/8/

问题发生在:Chrome、Firefox、Android 浏览器、Edge。

Answer 1

延迟是因为您正在从 max-height: 400px 转换至 max-height: 0但是你的容器只有 72px在高度。

因此您无法从400px 观察到动画至 72px , 但仅在 max-height 之后在实际 height 下方进行动画处理你的元素。如果匹配height元素和 max-height您将观察到完整的过渡，没有任何视觉延迟。