CSS3单向转换？
CSS3单向转换？
提问于 2011-05-23 10:21:13
使用CSS3转换，可以对任何属性产生“平滑”和“平滑向下”效果。
我可以将它设置为只有“平滑”效果吗？我希望解决方案是只在CSS，避免JavaScript如果可能的话。
逻辑流程：
- 用户单击element
- 转换需要0.5s才能将背景颜色从白色更改为黑色
- 用户释放鼠标左键button
- Transition需要0.5s才能将背景颜色从黑色更改为白色
我想要的：
- 用户点击元素
- 转换需要0来更改
- 用户松开鼠标按钮
- 转换需要0.5秒才能更改...
没有“转进”时间，但有一个“转出”时间。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-05-23 11:33:57
我在Chrome编辑器中尝试了以下内容，它在CSS3 (12.0.742.60beta-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!">
Stack Overflow用户
发布于 2021-07-22 22:50:30
使用"transition:none“也可以：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6092239
复制相关文章
相似问题