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

Question

我简直不敢相信我在基本过渡时遇到了麻烦......但唉，我是。我实际上找不到另一个有这个问题的帖子，所以我的代码一定有特别的问题。

我正在用最大高度进行简单的过渡，以便当您将鼠标悬停在菜单项上时，子菜单会向下滑动，如下所示：

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/

Answer 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才能显示隐藏的项目。

Answer 2

更新的小提琴

修复延迟解决方案：

将元素的立方贝塞尔（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;
}