CSS过渡和属性延迟在鼠标退出时不起作用

Question

我制作了一个隐藏的垂直菜单，在悬停/活动时显示。我用的是带有延迟的transition属性。

• 鼠标悬停时，菜单显示有延迟
• 当鼠标不在时，菜单进入/退出，但没有任何延迟。

li {
  display: block;
  padding: 10px;
}
ul ul {
  max-height: 0em;
  overflow: hidden;
}
ul > li:hover ul,
ul > li:active ul {
  max-height: 10em;
  transition: 1000ms all ease 500ms;
}

<ul>
  <li>Option1
    <ul>
      <li>OptionA</li>
      <li>OptionB</li>
    </ul>
  </li>
  <li>Option2</li>
</ul>

我怎么能有一个延迟/持续时间，移动回初始值?

PS:我不能使用JavaScript

Answer 1

为元素添加过渡，而不是状态。当状态结束(鼠标离开元素)时，CSS不再起作用。

更新。片段现在立即打开，关闭延迟为2000ms。通过增加悬停状态延迟，可以增加开启延迟。

li {
  display: block;
  padding: 10px;
}
ul ul {
  max-height: 0em;
  overflow: hidden;
  -webkit-transition: 1000ms all ease 2000ms;
     -moz-transition: 1000ms all ease 2000ms;
      -ms-transition: 1000ms all ease 2000ms;
       -o-transition: 1000ms all ease 2000ms;
          transition: 1000ms all ease 2000ms;
}
ul > li:hover ul,
ul > li:focus ul,
ul > li:active ul {
  max-height: 10em;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

<ul>
  <li>Option1
    <ul>
      <li>OptionA</li>
      <li>OptionB</li>
    </ul>
  </li>
  <li>Option2</li>
</ul>

注意:在这种情况下，您还可以使用transition: 1000ms max-height ease 500ms;来略微提高性能。在单个过渡中不重要，但它们可能会加起来。

Answer 2

您必须将transition设置为元素，而不是悬停。试试下面的代码片段。

li {
  display: block;
  padding: 10px;
}
ul ul {
  max-height: 0em;
  overflow: hidden;
  transition: 400ms all ease 500ms;
}
ul > li:hover ul,
ul > li:active ul {
  max-height: 10em;
  transition: 1000ms all ease 500ms;
}

<ul>
  <li>Option1
    <ul>
      <li>OptionA</li>
      <li>OptionB</li>
    </ul>
  </li>
  <li>Option2</li>
</ul>

Answer 3

只需将transition添加到原始属性中，就可以了，因为您可以在那里添加transition-delay。这就是为什么您应该同时指定状态和原始元素。因为您希望仅在退出:hover/:active/:focus状态时包含延迟。

li {
  display: block;
  padding: 10px;
}
ul ul {
  max-height: 0em;
  overflow: hidden;
}
ul > li ul,
ul > li ul {
  transition: all ease 500ms;
  transition-delay: 2s;
}
ul > li:hover ul,
ul > li:active ul,
ul > li:focus ul {
  max-height: 10em;
  transition: 1000ms all ease 500ms;
}

<ul>
  <li>Option1
    <ul>
      <li>OptionA</li>
      <li>OptionB</li>
    </ul>
  </li>
  <li>Option2</li>
</ul>