CSS Animation Related Events Aren't Fired
Rybadour opened this issue · 2 comments
"animationstart" and "animationend" aren't fired when I run my Javascript with karma-chrome-launcher so I am unable to test my code.
These events are fired when CSS animations are run: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event
I am triggering these animations with CSS like:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.popover:not([visible]) .content.did-fade-in {
display: inline-block;
animation: fadeOut 200ms;
}
.popover[visible] .content {
display: inline-block;
animation: fadeIn 200ms;
}
I will add to this that transition events (at least the HTMLElement
API) don't fire either. Specifically, the transitionstart
and transitionend
events. I am also using CSS to define the transitions which are triggered by an additional class added to the component when a prop changes.
For future eyes … If your intention is to test JavaScript code over CSS, it is probably best to simply dispatch these events manually to avoid blocking tests for the duration of your CSS animations/transitions.
animatedEl.dispatchEvent(new Event('animationend'));