Сделайте так, чтобы 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 секунды или что-то в этом роде. Я огляделся вокруг и нашел только информацию о том, как изменить цвет навсегда, Есть ли простой способ изменить цвет на короткое мгновение?
Ответы - Сделайте так, чтобы div менял цвет на короткое время при нажатии / Make so that div changes color for a brief time when clicked
05.01.2020 01:50:53
Вы могли бы сделать что-то вроде
#ingredientBox:active {
color: red;
}
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 уже предложил это. Это тоже хороший вариант.
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, чтобы сделать доступность намного проще.