Html CSS3单向过渡?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6092239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:43:56  来源:igfitidea点击:

CSS3 one-way transition?

htmlcss

提问by Abhishek

Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property.

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

Can I have it setup to have only a 'smooth down' effect? I'd like the solution to be in CSS only, avoiding JavaScript if possible.

我可以将它设置为仅具有“平滑”效果吗?我希望解决方案仅使用 CSS,尽可能避免使用 JavaScript。

Logic flow:

逻辑流程:

  • User clicks element
  • Transition takes 0.5s to change background color from white to black
  • User lets go of the mouse left button
  • Transition takes 0.5s to change background color from black to white
  • 用户点击元素
  • 过渡需要 0.5 秒才能将背景颜色从白色变为黑色
  • 用户松开鼠标左键
  • 过渡需要 0.5 秒才能将背景颜色从黑色变为白色

What I want:

我想要的是:

  • User clicks element
  • Transition takes 0s to change
  • User lets go of mouse button
  • Transition takes 0.5s to change...
  • 用户点击元素
  • 转换需要 0 秒才能改变
  • 用户松开鼠标按钮
  • Transition 需要 0.5s 才能改变...

There's no 'transition-in' time, but there's a 'transition-out' time.

没有“转入”时间,但有“转出”时间。

回答by Matty K

I tried the following in the CSS3 Tryit Editor and it worked in Chrome (12.0.742.60 beta-m).

我在 CSS3 Tryit Editor 中尝试了以下内容,它在 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!">