Как реализовать мигание светофора?

Стоит задача реализовать мигание светофора за 3 секунды до конца активного света. Хоть убей, не получается. Максимум чего я добился это статичного мигания всех цветов, что не совсем то , что мне нужно

App.vue

<template>
  <div class="traffic-light">
    <lights path="/red" class="red"></lights>
    <lights path="/yellow" class="yellow"></lights>
    <lights path="/green" class="green"></lights>
    <timer :currentTime="timeChange"></timer>
  </div>
</template>

<script>
import lights from "./components/lights";
class State {
  constructor(path, duration, next) {
    this.path = path;
    this.duration = duration;
    this.next = next;
  }
}
export default {
  name: "App",

  data: function () {
    return {
      timeChange: "",
    };
  },
  methods: {
    trigger(state, callback) {
      callback(state);
      this.timeChange = state.duration;
      setTimeout(() => {
        this.trigger(state.next, callback);
      }, state.duration * 1000);
    },
  },
  mounted() {
    const red = new State("/red", 10);
    const yellowFromRed = new State("/yellow", 3);
    const yellowFromGreen = new State("/yellow", 3);
    const green = new State("/green", 15);

    red.next = yellowFromRed;
    yellowFromRed.next = green;
    green.next = yellowFromGreen;
    yellowFromGreen.next = red;

    let beginState = red;
    if (this.$route.path === "/yellow") beginState = yellowFromRed;
    else if (this.$route.path === "/green") beginState = green;

    this.trigger(beginState, (state) => {
      this.$router.push({ path: state.path, component: lights })
    });
  },
};
</script>

lights.vue

<template>
  <div class="light" :class="{active: isActive,blink : isBlink}" >
  </div>
</template>

<script>
export default {
  props: ['path'],
  computed: {
    isActive: function () {
      return this.$route.path === this.path
    },

  }
}
</script>

и сам таймер

<template>
  <div class="timer">{{ currentTime }}</div>
</template>

<script>
export default {
  name: "timer",
  props: ["currentTime"],
  mounted() {
    setInterval(() => {
      this.currentTime--;
    }, 1000);
  },
};
</script>

Ответы (0 шт):