javascript - 使 div 在单击时短暂改变颜色

Question

我有一个设置，我使用 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 在单击时做出视觉 react (可能会改变颜色 0.2 秒左右。我环顾四周，只找到有关如何永久改变颜色的信息，是否有一种简单的方法来改变颜色只是一小会儿？

Answer 1

您可以使用 CSS 关键帧动画来完成此操作:

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

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

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