如何实现进出三种不同状态的不同转换

Question

我正在尝试根据三种状态（默认、悬停、活动）制作一个具有不同背景颜色（浅绿色、绿色、深绿色）的按钮，并以这种方式在状态之间进行转换：

当用户：

悬停在按钮上（默认 -> 悬停），它应该立即从浅绿色过渡到绿色。
点击按钮（悬停 -> 激活），它应该立即从绿色过渡到深绿色。
释放点击（活动 -> 悬停），它应该从深绿色逐渐变为绿色。
'unhovers'，（悬停 -> 默认），它应该从绿色逐渐变为浅绿色。

我能做到的唯一方法是 JavaScript，这并不理想。据我了解，这可能是不可能的，因为我只能为悬停定义一个转换，默认 -> 悬停和单击 -> 悬停都会发生这种情况。我想要的是能够让从默认 -> 悬停的过渡为 0s/none，并且从单击 -> 悬停的过渡为 1s/某物。这可能不使用 JavaScript?

以下是我目前尝试过的两个片段。第一个在单击时表现出所需的行为，而第二个在悬停时表现出所需的行为。

button {
  height: 100px; width: 400px;
  border: none; outline: none;

  background-color: lightgreen;
  transition: 1s;
}
/* unwanted fade going from default -> hover */
button:hover {
  background-color: green;
  transition: 1s;
}

button:active {
  background-color: darkgreen;
  transition: 0s;
}

<button></button>

button {
  height: 100px;
  width: 400px;
  outline: none;
  border: none;
  
  background-color: lightgreen;
  transition: 1s;
}

button:hover {
  background-color: green;
  transition: 0s;
}
/* wanted but missing fade when going from active -> hover */
button:active {
  background-color: darkgreen;
  transition: 0s;
}

<button></button>

Answer 1

这是一个疯狂的想法。在背景颜色和背景图像之间交替。这适用于 Chrome 和 Safari。 Firefox 尚未实现背景图像转换。

button {
  height: 100px;
  width: 400px;
  outline: none;
  border: none;
  
  background-color: lightgreen;
  transition: background-color 1s;
}

button:hover {
  background-color: green;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAIAAABRDCAKAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYaBya+xvUAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABNJREFUCNdjZGhgwA+YGBiGjQoAfXAAjqFknA0AAAAASUVORK5CYII=');
  transition: background-image 1s;
}
button:active {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAIAAABGj2DjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYUHtxWQ7sAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABhJREFUKM9jZEhhIBUwMTCM6hnVM6j1AABGTwCARo/YOwAAAABJRU5ErkJggg==');
  transition: 0s;
}

<button></button>

如何实现进出三种不同状态的不同转换

How to implement different transitions in and out of three different states

css

css-transitions