CSS悬停过渡 - 如何消除延迟？答案

【问题标题】：CSS hover transition - how to remove delay?CSS悬停过渡 - 如何消除延迟？
【发布时间】：2014-03-17 02:29:22
【问题描述】：

我不敢相信我在基本过渡方面遇到了麻烦……但是，唉，我是。我实际上找不到其他有这个问题的帖子，所以我的代码一定有什么特别的问题。

我正在使用 max-height 进行简单的转换，这样当您将鼠标悬停在菜单项上时，子菜单会向下滑动，如下所示：

ul.sidenav ul {
    padding:0;
    margin:0;
    list-style:none;
    max-height:0;
    overflow:hidden;
    transition:max-height 1s ease-in-out;
    }

ul.sidenav > li:hover > ul {max-height:999px;}

这在鼠标悬停时可以正常工作，但在鼠标移出时，在滑回之前会有明显的延迟。我尝试了各种缓入/缓出设置，并尝试为鼠标移出添加单独的时间。但这种延迟仍然存在。

发生了什么事？这是一个显示问题的小提琴： http://jsfiddle.net/t5Wv2/8/

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

这里的问题是您将ul.sidenav > li:hover > ul 设置为max-height: 999px

当您鼠标移出时，将 max-height 从 999px 转换为 0px 需要 1 秒钟——您只是没有看到它发生。

将max-height 更改为更接近实际高度（即99px）并将transition-duration 降低为0.25s，您会看到不同。

ul.sidenav ul {
  transition:max-height 0.25s ease-in-out;
}

ul.sidenav > li:hover > ul {max-height:99px;}

请记住，如果您添加更多子菜单项并且高度超过99px，溢出将被隐藏，因此您必须增加max-height 才能显示隐藏项。

【讨论】：

天哪！当然。这完全有道理，我什至没有想过它必须如何从 999 到 0 基本上“倒计时”。谢谢。这样就解决了。
欢迎您！不幸的是，它还不够聪明，无法知道里面元素的实际高度，所以它只知道从你设置的 max-height 过渡。

【解决方案2】：

Updated fiddle

修复延迟解决方案：

为元素放置cubic-bezier(0, 1, 0, 1)转换函数。

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

【讨论】：