Сделайте так, чтобы div менял цвет на короткое время при нажатии


Сделайте так, чтобы div менял цвет на короткое время при нажатии

05.01.2020 01:43:44 Просмотров 51 Источник

У меня есть настройка, где я использую дивы в качестве кнопок, и когда они нажимаются, они добавляют ингредиенты к моему бургеру.

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 секунды или что-то в этом роде. Я огляделся вокруг и нашел только информацию о том, как изменить цвет навсегда, Есть ли простой способ изменить цвет на короткое мгновение?

У вопроса есть решение - Посмотреть?

Ответы - Сделайте так, чтобы div менял цвет на короткое время при нажатии / Make so that div changes color for a brief time when clicked

Является ответом!
Abito Prakash

05.01.2020 01:50:53

Вы могли бы сделать что-то вроде

#ingredientBox:active {
  color: red;
}
https://stackoverflow.com/questions/59599046/make-so-that-div-changes-color-for-a-brief-time-when-clicked/59599101#comment105362450_59599101
Работает как заклинание, спасибо!
T. Short

05.01.2020 01:54:35

Вы можете использовать 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)

}

РЕДАКТИРОВАТЬ

Я собирался также предложить использовать keyframes, но @AlexanderKaran уже предложил это. Это тоже хороший вариант.

AlexanderKaran

05.01.2020 01:55:30

Вы можете использовать CSS keyframe анимацию, чтобы сделать это:

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

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

Я бы также добавил еще одну заметку, чтобы попытаться использовать кнопку вместо div, чтобы сделать доступность намного проще.

Помочь в развитии проекта:
Закрыть X