Как в Vue реализовать анимацию пунктов меню с приростом задержки для каждого пункта?

Question

[photosho]

Например, анимация такая:

@keyframes menu {
  from {left: -20px}
  to {left: 0px}
}

Меню выводится в "v-for", нужно поставить "animation-delay" для каждого пункта с небольшим приростом. Сам придумал только такой метод:

:style="{'animation-delay': delay()}"

methods: {
  delay() {
    this.counter = this.counter + 0.05;
    return this.counter + 's';
  }
}

Но при таком подходе он накручивает задержку до 50 сек - у меня всего 10 пунктов меню, а функция вызывается более 1000 раз. Видимо, атрибут "style" проходит какие-то внутренние обработки Vue, и каждый раз вызывается эта функция.

В общем, как правильно реализовать анимацию с приростом задержки в "v-for"? Или может быть, в Vue предусмотрено что-то такое по умолчанию?

Answer 1

[0xD34F]

Поставьте значение animation-delay в зависимость от индекса в v-for:

v-for="(n, i) in items"
:style="{ 'animation-delay': i * 0.5 + 's' }"

UPD. Вынесено из комментариев:

индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи

То есть, данные - это объект, а не массив? Никаких сложностей, всё предусмотрено - v-for для объектов выдаёт три значения, как раз для того, чтобы у свойств тоже мог быть индекс.

Comments

[photosho]

Писал в другом ответе, что индекс используется для других целей, там текстовая строка, а не число. В этом и сложность задачи.

[0xD34F]

photosho, дополнил ответ.

[photosho]

0xD34F, спасибо, это как раз то, что нужно.