html - 如何使单击按钮的效果持续 0.5 秒？

Question

我想做

background-color: green;
border: 5px solid green;

对于点击后仅 0.5 秒效果的按钮，为点击设置动画。我该怎么做？

Answer 1

您需要使用一些 JavaScript 来检测点击并更改样式。您可能会使用 CSS 动画，但您仍然需要 JavaScript 来触发它，所以我不确定是否值得努力让它在 CSS 中工作:

function setStyles(el, styles) {
  Object.entries(styles).map(
    ([property, value]) => el.style[property] = value
  )
}

const btn = document.querySelector("button")
btn.addEventListener("click", () => {
  // capture original styles
  const origStyles = {
    background: btn.style.background,
    border: btn.style.border,
  }
  
  // set temp styles
  setStyles(btn, {
    background: "green", 
    border: "5px solid green",
  })

  // reset original styles after 0.5 seconds
  window.setTimeout(() => setStyles(btn, origStyles), 500)
})

<button>Click Me</button>