时间戳

首页 > 解决方案 > 如何使单击按钮的效果为 0.5 秒？

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

问题描述

我要实现

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

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

标签： htmlcsscss-animations

解决方案

您需要使用一些 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>

推荐阅读