[Vuejs]-Make so that div changes color for a brief time when clicked

by

2👍

✅

You could do something like

#ingredientBox:active {
  color: red;
}
👤Abito Prakash

3👍

You can use CSS keyframe animation to pull this off:

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

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

I would also add another note to try and use a button instead of a div, make accessibility a lot easier.

👤AlexanderKaran

1👍

You could use setTimeout to add a class to the button and then remove it.

code: 

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

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

}

EDIT

I was going to also suggest using CSS keyframes but @AlexanderKaran already suggested it. That is a good option too.

👤T. Short

Leave a comment