CSS3单向过渡？

使用 CSS3过渡，可以对任何属性产生“平滑上升”和“平滑下降”的效果。

我可以把它设置成只有一个“平滑下降”的效果吗？我希望解决方案只使用 CSS，尽可能避免使用 JavaScript。

逻辑流程:

  • 用户单击元素
  • 过渡需要0.5秒改变背景颜色从白色到黑色
  • 用户放开鼠标左键
  • 过渡需要0.5秒改变背景颜色从黑色到白色

我想要的:

  • 用户单击元素
  • 过渡需要0来改变
  • 用户放开鼠标按钮
  • 转变需要0.5秒来改变..。

没有“过渡时间”，但有一个“过渡时间”。

57332 次浏览
小开
最佳答案

I tried the following in the CSS3 Tryit Editor and it worked in 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!">

小开

using "transition:none" works also :

div{
height: 40px;
width: 40px;
padding: 40px;
background: tomato;
transition: background 0.3s ease-in;
}
div:active{
background: blue;
transition: none;
}
<div>click me</div>


提交答案