Question

我无法相信我在基本过渡方面遇到了麻烦......但是，唉，我。我实际上找不到另一个有这个问题的帖子，所以我的代码一定有一些特别的错误。

我正在使用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/

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以显示隐藏的项目。< / p>

Answer 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;
}

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

2 个答案: