Как во vue «перезапускать» анимацию каждую секунду?

Question

[Tutucu]

Есть таймер. Каждую секунду нужно добавлять анимацию подёргивания, код:

<template>
    <div class="timer"
        v-bind:class="{anime: isAnim}"
        >
        <div class="timer__cicle">
            <div class="wrapper" data-anim="base wrapper">
                <div class="circle" data-anim="base left"></div>
                <div class="circle" data-anim="base right"></div>
            </div>
        </div>
        <div class="timer__body">{{number}}</div>
    </div>
</template>

<script>
    export default {
        props: ['fromNumber'],
        data() {
            return {
              number: this.fromNumber,
              isAnim: true
            }
        },
        mounted() {
              var timer = setInterval(function(){
                if (this.number != 1) {
                  this.isAnim =false;
                  this.number -= 1;
                  this.isAnim = true;
                }else{
                  this.$emit('success');
                  clearInterval(timer);
                }
              }.bind(this), 1000);
        }
    }
</script>

Т.е. я добавляю и убираю класс .anim к элементу .timer, чтобы её перезапустить, но анимация срабатывает в первый раз, а потом не хочет повторятся. Пробовал устанавливать true/false каждую секунду и с помощью setTimeout в конце секунды, но ничего не помогло. Знаю, что в jquery чтобы перезапустить анимацию таким способом нужно, чтобы между добавлением и удалением класса произошло изменение страницы, а вот как во Vue сделать - не знаю. Как это можно реализовать?

Answer 1

[0xD34F]

nextTick + вызов дополнительного reflow путём обращения к одному из свойств анимируемого элемента.

Или назначайте анимируемому элементу key, и изменяйте его когда анимацию надо перезапустить (свойство isAnim в этом случае не нужно).

Или делайте анимацию бесконечной, и чтобы длительность совпадала с интервалом, по которому уменьшаете number. Класс с анимацией назначается в случае, если number ещё есть куда уменьшать.

Comments

[Tutucu]

Спасибо! Сделал через key:

<div class="timer anime"
        :key="number"
        >
        <div class="timer__cicle">
            <div class="wrapper" data-anim="base wrapper">
                <div class="circle" data-anim="base left"></div>
                <div class="circle" data-anim="base right"></div>
            </div>
        </div>
        <div class="timer__body">{{number}}</div>
    </div>

Каждый раз когда изменяется переменная number, элемент пересоздаётся и анимация перезапускается.