CSS3单向过渡？

Posted 2023-03-06

【中文标题】CSS3单向过渡？

【英文标题】：CSS3 one-way transition?

【发布时间】：2011-08-30 20:07:07

【问题描述】：

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

我可以将其设置为仅具有“平滑”效果吗？我希望解决方案仅使用 CSS，尽可能避免使用 javascript。

逻辑流程：

用户点击元素 将背景颜色从白色变为黑色的过渡需要 0.5 秒 用户松开鼠标左键 将背景颜色从黑色变为白色的过渡需要 0.5 秒

我想要什么：

用户点击元素 Transition 需要 0 来改变 用户松开鼠标按钮 Transition 需要 0.5s 才能改变...

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

【参考方案1】：

我在 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!">

【讨论】：

哇！我不敢相信这没有发生在我身上……当然！基本转换设置为 0s，活动状态转换覆盖基本值，即设置为 0.5s...唉...我需要一杯咖啡...

在我的情况下，我希望过渡到延迟/发生在悬停时，而不是悬停时。阅读上述内容后，解决方案就更简单了：只需在 :hover 规则上放置一个转换，无需在其他任何地方取消任何内容。感谢您指出正确的方向，并举了一个清晰的例子。

感谢您的回答，我测试了它，但是当转换设置相反时它对我有用（在 Chrome 中），我不知道规格是否发生了变化或什么

谢谢！估计是我想得太复杂了。我希望 opacity 在 CSS 类 b 出现后“淡出”一个元素，但在 CSS 类消失后突然显示更改（没有过渡）。所以我定义了.a transition: ... 0s...; .b opacity: 0.5; .b.a transition: ... 2s ...; 。现在，如果一个元素，它总是附加了 CSS 类 a，也获得了类 b，不透明度淡出到 0.5，而当 b 突然不再存在时，没有过渡回来。

【参考方案2】：

使用“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>