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

Posted 2023-02-22

【中文标题】使 div 在单击时会在短时间内改变颜色

【英文标题】：Make so that div changes color for a brief time when clicked

【发布时间】：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之后。

【参考方案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，使可访问性更容易。