Как реализовать мигание светофора?
Стоит задача реализовать мигание светофора за 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>