使 div 在单击时会在短时间内改变颜色答案

【问题标题】：Make so that div changes color for a brief time when clicked使 div 在单击时会在短时间内改变颜色
【发布时间】：2020-04-23 05:25:42
【问题描述】：

我有一个设置，我将 div 用作按钮，当点击它们时，它们会添加到我的汉堡的配料中。

JS：

<div id="ingredientBox">
        <Ingredient
        ref="ingredient"
        v-for="item in currentIngredients"
        v-on:increment="addToBurger(item)"
        :item="item"
        :lang="lang"
        :ui-labels="uiLabels"
        :key="item.ingredient_id">
      </Ingredient>
    </div>

使用 CSS：

.ingredient {
  border: 1px solid #f5f5f28a;
  padding: 0.8em;
  width: 23vh;
  height: 19vh;
  background-color: green;
  border-radius: 25px;
  margin: 10px;
  text-align: center;
}

我现在希望 div 在单击时做出视觉反应（可能会更改颜色 0.2 秒或其他时间。我环顾四周，只找到有关如何永久更改颜色的信息，有没有一种简单的方法来更改颜色只是片刻？

【问题讨论】：

听起来你在CSS :active pseudo-class之后。

标签： javascript css vue.js css-animations css-transitions

【解决方案1】：

你可以做类似的事情

#ingredientBox:active {
  color: red;
}

【讨论】：

【解决方案2】：

您可以使用setTimeout 为按钮添加一个类，然后将其删除。

代码：

buttonTrigger() {
   element.classList.add('somesyle'); // add colour changing class to element

   setTimeout(() => {
       element.classList.remove('somestyle'); //remove the class after 0.2 seconds
   }, 200)

}

编辑

我还打算建议使用 CSS keyframes，但 @AlexanderKaran 已经建议了。这也是一个不错的选择。

【讨论】：

【解决方案3】：

您可以使用 CSS 关键帧动画来实现这一点：

@keyframes animate-burger-button {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: green;
  }
}

#ingredientBox:active {
  animation: animate-burger-button 0.8s forwards;
}

我还会添加另一个注释来尝试使用按钮而不是 div，使可访问性更容易。

【讨论】：