Subscribe on changes!

animation-iteration-count has no effect

avatar
Jan 11th 2022

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

use animation-iteration-count in style to make the animation run multiple times.

What is expected?

The animation should run multiple times.

What is actually happening?

The animation only runs once.


The animationend event is never triggered.

avatar
Jan 16th 2022

animation-iteration-count only works if the element stays in the DOM. Vue removes the element on animationend event, which fires after each iteration. Supporting this property is out of scope for Vue.

avatar
Jan 18th 2022

animation-iteration-count only works if the element stays in the DOM. Vue removes the element on animationend event, which fires after each iteration. Supporting this property is out of scope for Vue.

That's incorrect. animationend event only be fired after the last iteration has completed. If Vue removes the element on animationend event, then animation-iteration-count should work as expected.