Question

我正在使用css过渡来设置div的高度。我想做的是慢速过渡和快速过渡。

这是一个下拉菜单，虽然当你最初悬停在菜单项上时下拉效果很好，当你移动到下一个项目时，我希望上一个下拉列表几乎立即快速回传。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

将较慢的过渡放在div:hover上，并将更快的过渡放在div本身上。当剩下:hover状态时，div转换将接管。

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

CSS转换的速度不同

1 个答案:

实施例