3

Looking for a way to run Vue animations infinitely. The initial animation works, but it won't run infinitely.

.endless {
    animation: endless_animation 10s linear infinite;
}

This works with plain css, but will restart every time the component updates. 

<transition appear appear-class="endless">
    <div class="endless_animation_div"></div>
</transition>

This doesn't restart everytime the component updates, but only fires once. How do I infinitely animate a vue transition?

Jacob
  • 890
  • 10
  • 30
  • 2
    This won't work simply because the transition classes are removed after their lifecycle. Why not just put the animation on the div itself and remove the transition? should effectively work the same. – Steven B. Aug 12 '19 at 16:41
  • @StevenB. Ah, I see. So there is no such thing as an infinite life cycle on a transition? And what you're suggesting is a plain ole javascript transition? – Jacob Aug 12 '19 at 16:49
  • 1
    Yeah, they're just for transitioning between states essentially. I guess it depends on the use case. I really just mean put the endless class on the div itself and then v-if/v-show the div whenever it should appear. – Steven B. Aug 12 '19 at 17:15

0 Answers0