I have designed a transition that changes instantly background color, then slowly recovers to original color:
This is designed for row in a table to notify user of a change. I’d like to trigger effect this programmatically, but by using the actual CSS.
I tried to use setTimeout to add and remove class name from the nodes:
I also tried to use the transitioned event, but the event doesn’t ever trigger:
I don’t like the setTimeout method, can’t you think of better trick to trigger the blink effect?
The reason the transitionend event isn’t being triggered is because transition-duration is set to 0s. In other words, the transition never begins until the class is removed (but the class isn’t removed because the event isn’t fired).
It really sounds like an animation would be better suited for this. Just listen to the animationend event and remove the class in the callback when the animation ends:
As a work-around to your initial solution, you could change the transition-duration to something extremely short, like 1ms, so that the initial transition is actually started, thereby allowing the transitionend event to be fired: