css - CSS 过渡的不同速度

Question

我正在使用 css 过渡来为 div 的高度设置动画。我想做的是一个缓慢的过渡和一个快速的过渡。

它用于下拉菜单，虽然当您最初将鼠标悬停在菜单项上时下拉菜单效果很好，但当您移动到下一个元素时，我希望上一个下拉菜单几乎立即恢复原状。

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
div:hover {
  width: 300px;
}

<div></div>
<p>Hover over the div element above, to see the transition effect.</p>

有没有办法为输入和输出转换设置不同的持续时间？

Answer 1

将较慢的转换放在 div:hover 上以及 div 本身的更快过渡。当:hover状态离开，divs 转换将接管。

例子

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.2s;
}
div:hover {
  width: 300px;
  transition: width 2s;
}

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>