restarting a delayed css animation on animationend with javascript in VueJS

Question

I'm using VueJS to render 4 instances of the same component out in a loop. The component has a somewhat complex CSS animation on it. I want the animations on these 4 instances to be staggered and loop infinitely, so that when one finishes, the next starts, then the next, then the next, then back to the start.

I'd read about a technique to get a ref to the dom node, set the style.animation to none, and then reset it with style.animation="" but this is not restarting the animation for me. Here is my code:

<template>

    <div 
      class="radar2__inner"
      @animationend="handleAnimationEnd"
      :ref="`radar2--${radarIndex}`"
      :style="{
        animationDelay: `${5*radarIndex}s`  
      }"
    />

</template>

And the animation end event (which does fire successfully):

methods: {
handleAnimationEnd: function(){
    let thisAnimationStyle = this.$refs[`radar2--${this.radarIndex}`].style.animation;
    thisAnimationStyle = "none";
    setTimeout(()=>{
        thisAnimationStyle = ""; //not working to restart the animation
    },100);
}
}

Shouldn't matter, but here is my animation keyframes syntax:

<style scoped lang="scss">
@import "../scss/_variables.scss";
@import "../scss/mixins.scss";

.radar2 {
  &__inner {
    width: $radar2Size;
    height: $radar2Size;
    border-radius: 50%;
    animation: radar 5s linear forwards;
    background-color: $color--radar;
  }
}

@keyframes radar {
  0% {
    transform: scale(0.8);
    background-color: rgba($color--radar,1);
    box-shadow: 0 0 0 0 rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.3} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.5} rgba($color--radar, 0);
  }
  20% {
    box-shadow: 0 0 0 #{$radar2RingSize} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.3} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.5} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0);
  }
  30% {
    background-color: rgba($color--radar,1);
    box-shadow: 0 0 0 #{$radar2RingSize*1.3} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.5} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0);
  }
  40% {
    background-color: rgba($color--radar,.5);
    box-shadow: 0 0 0 #{$radar2RingSize*1.5} rgba($color--radar, 0.3),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0);
  }
  50% {
    transform: scale(1.2);
    background-color: rgba($color--radar,.25);
    box-shadow: 0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0),
                0 0 0 #{$radar2RingSize*1.8} rgba($color--radar, 0);
  }
  51% {
    box-shadow: none;
  }
  60% {
    background-color: rgba($color--radar,0);
    transform: scale(1.2);
  }
  61% {
    transform: scale(0.0);
  }
  90% {
    transform: scale(0.6);
    background-color: rgba($color--radar,0);
  }
  100% {
    transform: scale(0.8);
    background-color: rgba($color--radar,1);
  }
}
</style>

Any idea how to make this staggering happen?

restarting a delayed css animation on animationend with javascript in VueJS

0 Answers0