在VueJS中使用javascript在animationend上重新启动延迟的css动画

我使用VueJS在一个循环中渲染同一组件的4个实例。组件上有一个有点复杂的CSS动画。我希望这4个实例上的动画交错并无限循环，这样当一个完成时，下一个开始，然后下一个，然后下一个，然后回到开始

要获取对dom节点的引用，请将

style.animation

设置为

none

，然后使用

style.animation=”“

重置它，但这不会为我重新启动动画。这是我的密码：

<template>

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

</template>

这不重要，但以下是我的动画关键帧语法：

<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>

@导入“./scss/_variables.scss”；
@导入“./scss/mixins.scss”；
.雷达2{
&__内在的{
宽度：$2，尺寸；
身高：$2.5米；
边界半径：50%；
动画：雷达5s线性向前；
背景色：$color——雷达；
}
}
@关键帧雷达{
0% {
变换：比例（0.8）；
背景色：rgba（$color——雷达，1）；
盒影：0 rgba（$color--radar，0），
0#{$radar2RingSize}rgba（$color--radar，0），
0#{$radar2RingSize*1.3}rgba（$color--radar，0），
0#{$radar2RingSize*1.5}rgba（$color--radar，0）；
}
20% {
盒影：0 0#{$radar2RingSize}rgba（$color--radar，0.3），
0#{$radar2RingSize*1.3}rgba（$color--radar，0.3），
0#{$radar2RingSize*1.5}rgba（$color--radar，0.3），
0{$radar2RingSize*1.8}rgba（$color--radar，0）；
}
30% {
背景色：rgba（$color——雷达，1）；
盒影：0 0#{$radar2RingSize*1.3}rgba（$color--radar，0.3），
0#{$radar2RingSize*1.5}rgba（$color--radar，0.3），
0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0{$radar2RingSize*1.8}rgba（$color--radar，0）；
}
40% {
背景色：rgba（$color——雷达，.5）；
盒影：0 0#{$radar2RingSize*1.5}rgba（$color--radar，0.3），
0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0{$radar2RingSize*1.8}rgba（$color--radar，0）；
}
50% {
转换：比例（1.2）；
背景色：rgba（$color——雷达，.25）；
盒影：0 0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0#{$radar2RingSize*1.8}rgba（$color--radar，0），
0{$radar2RingSize*1.8}rgba（$color--radar，0）；
}
51% {
盒影：无；
}
60% {
背景色：rgba（$color——雷达，0）；
转换：比例（1.2）；
}
61% {
变换：比例（0.0）；
}
90% {
变换：比例（0.6）；
背景色：rgba（$color——雷达，0）；
}
100% {
变换：比例（0.8）；
背景色：rgba（$color——雷达，1）；
}
}

你知道如何让这种惊人的事情发生吗

<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>