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，您将完整地观察到转换，而没有任何视觉延迟。

Answer 2

添加transition-delay: -.5s; 到

#switch:not(:checked) ~ #txt {

结果：

  #switch:not(:checked) ~ #txt {
        max-height: 0px;
        overflow: hidden;
        width: 100%;
        -webkit-transition: 1s max-height 0s;
        -moz-transition: 1s max-height 0s;
        transition: 1s max-height 0s;
    transition-delay: -.5s;
  }

Answer 3

这里的问题是您正在使用max-height来控制下拉列表的高度，以便它只显示菜单项所需的高度。在这种情况下，它呈现为72px。但是，浏览器仍在尝试对max-height 400px进行转换。

当菜单打开时，转换看起来并不会因为它立即启动而延迟，但浏览器计算完成转换的时间实际上是基于max-height的{{1}}。这就是为什么过渡看起来像是在发生更快＆＃34;超过1秒 - 因为它在大约四分之一秒内显示400px高大的菜单然后限制元素的高度，但过渡实际上是继续到{{1 }}。反过来看起来很滞后，因为浏览器实际上是在试图隐藏＆＃34;隐藏实际渲染元素之前的像素400到72。

将您的版本与下面的版本进行比较，转换需要5秒。单击打开菜单，然后等待5秒钟。然后单击关闭它。您将看到转换在大约4秒后才开始。在此期间，转换发生在像素400到72之间，然后渲染的元素在大约1秒内隐藏。

JS Fiddle with 5s transition

如果你用纯净的高度做这件事（不是你想要的，因为它不能控制72px的高度），你会看到一切正常。

JS Fiddle with height transition

因此，为了回答您的问题，过渡并非滞后，但尝试以这种方式仅使用400px进行转换会使其看起来像这样。

只有一种方式的滞后过渡

3 个答案: