CSS Animation Related Events Aren't Fired

[Rybadour]

"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;
}

[Smolations]

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.

[brocgailit]

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'));