Question

我做了一个隐藏的垂直菜单，显示在悬停/活动状态。我正在使用\chapter{}属性延迟。

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

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

如何延迟/持续时间，回到初始值？

PS：我不能使用JavaScript。

Answer 1

将转换添加到元素，而不是状态。当状态结束时（用鼠标留下元素），CSS不会起作用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：在这种情况下，您也可以使用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州时包含延迟。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS转换和属性延迟不适用于mouseout

3 个答案: