CSS3单向过渡？

Question

使用CSS3过渡效果，可以使任何属性具有“平滑向上”和“平滑向下”的效果。

是否可以设置仅具有“平滑向下”的效果？我希望只使用CSS来解决这个问题，如果可能的话避免使用JavaScript。

逻辑流程： - 用户单击元素 - 过渡需要0.5秒将背景颜色从白色变为黑色 - 用户松开鼠标左键 - 过渡需要0.5秒将背景颜色从黑色变回白色

我的需求： - 用户单击元素 - 过渡立即完成 - 用户松开鼠标按钮 - 过渡需要0.5秒完成

没有“进入过渡”时间，但有“退出过渡”时间。

- Abhishek

Answer 1

我在CSS3 Tryit编辑器中尝试了以下内容，它在Chrome（12.0.742.60 beta-m）中运行正常。

/* transition out, on mouseup, to white, 0.5s */
input
{
  background:white;
  -webkit-transition:background 0.5s;
  -moz-transition:background 0.5s;
  -ms-transition:background 0.5s;
  -o-transition:background 0.5s;
  transition:background 0.5s;
}

/* transition in, on click, to black, 0s */
input:active
{
  background:black;
  -webkit-transition:background 0s;
  -moz-transition:background 0s;
  -ms-transition:background 0s;
  -o-transition:background 0s;
  transition:background 0s;
}

<input type="button" value="click me to see the transition effect!">

- Matty K

---

哎呀！我简直不敢相信我没想到这个……当然了！基础转换设置为0秒，而活动状态转换覆盖了基础值，被设定为0.5秒……唉……我需要一杯咖啡…… - Abhishek

在我的情况下，我希望在鼠标移入时延迟/出现过渡效果，而不是在鼠标移出时。阅读上面的内容后，解决方案变得更简单了：只需在:hover规则上添加一个过渡效果，无需在其他任何地方取消任何内容。感谢您提供明确的示例，让我知道正确的方向。 - Schmuli

谢谢您的回答，我已经测试了一下，但是当过渡设置为另一种方式时（在Chrome中），它对我有效。我不知道规格是否已更改或其他原因。 - AbdulRahman AlHamali

谢谢！我想得太复杂了。我希望opacity在CSS类b存在时“淡出”一个元素，但一旦该CSS类消失（没有过渡），就会突然显示更改。因此，我定义了.a { transition: ... 0s...; } .b { opacity: 0.5; } .b.a { transition: ... 2s ...; }。现在，如果一个元素始终附有CSS类a，同时也获得了类b，不透明度会淡出到0.5，而当b突然不再存在时，就没有过渡回来了。 - Igor

Answer 2

使用"transition:none"也可以起作用：

div{
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}

<div>click me</div>

- Nicolas Guidetti