Question

假设我有一个带有过渡的简单按钮：

<button id="myBtn" type="button">Button A</button>

#myBtn {
  transition: background-color 1s;
}

我无法触摸上面的CSS，因为其他javascript驱动的效果需要过渡。但是我想在按下该按钮时为其分配一个不同的背景色，并且我希望这种颜色变化不会发生过渡。很自然，这：

#myBtn {
  transition: background-color 1s;
}
#myBtn:active {
  transition: background-color 0s;
  background-color: red;
}

但是，这当然仅在按钮进入:active状态时才禁用转换，而从按钮返回时不会禁用。换句话说，当新闻发布时，原始颜色将以1s的过渡恢复，而我希望它能立即恢复。所以我的问题是，有没有一种方法可以覆盖CSS中特定状态之间的过渡？

P.S。

我知道我可以在JS中完成此操作，例如：

btn.onmouseup(() => {
  btn.style.transition = "background-color 0s";
  setTimeout(() => btn.style.transition = "", 10);
  // Actually this doesn't even work because DOM can't react in 10ms
});

我只是想知道是否可以通过一种更易于维护且更丑陋的方式（即纯HTML和CSS）来做到这一点。

Answer 1

您可以添加仅在按钮处于活动状态时可见的可视覆盖层：

    
    #myBtn {
      transition: background 1s;
      position: relative;
    }
    #myBtn:before {
      content: "Button";
      visibility: hidden;
      position: absolute;
      top:0;bottom:0;left:0;right:0;
    }
    #myBtn:active:before {
      visibility: visible;
      background-color: red;
    }

<button id="myBtn">Button</button>

CSS-覆盖特定状态的过渡

1 个答案: