Как добавить/ удалить класс каждые 3 секунды в Vue?

Question

[Дмитрий]

Как каждые 3 секунды добавить класс для блока, а затем добавить класс для другого блока, и делать это циклично?
То есть мне нужно добавлять класс active в блок box-item каждые три секунды

<template>
    <section class="map mb-page">
        <div class="container">
            <div class="box">
                <div class="box-item active">1</div>
                <div class="box-item">2</div>
                <div class="box-item">3</div>
                <div class="box-item">4</div>
                <div class="box-item">5</div>
            </div>
        </div>
    </section>
</template>


<style lang="scss" scoped>
    .box {
        display: flex;
        flex-direction: column;
        &-item {
            border: 1px solid #000;
            width: 300px;
            height: 150px;
            border-radius: 20px;
            font-size: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active {
                &:nth-child(1) {
                    background: red;
                }
                &:nth-child(2) {
                    background: blue;
                }
                &:nth-child(3) {
                    background: green;
                }
                &:nth-child(4) {
                    background: yellowgreen;
                }
                &:nth-child(5) {
                    background: pink;
                }
            }
        }
    }
</style>

Comments

[Дмитрий Беляев]

а зачем делать скриптами то что спокойно делается на css анимациях?

Answer 1

[0xD34F]

const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);

function next() {
  active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}

let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));

<div
  v-for="(n, i) in blocks"
  v-text="n"
  :class="[ 'box-item', { active: i === active } ]"
></div>

Конечно, зашивать в стили цвета блоков и их количество - все эти :nth-child - не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:

<div
  v-for="(n, i) in colors"
  :style="{ backgroundColor: i === active ? n : '' }"
  ...

Comments

[modelair]

как всегда, отличные примеры кода

[Дмитрий]

Спасибо