Как отложить анимацию элемента transition?

Question

[VegasChickiChicki]

Суть в том, что есть 3 блока, у них одна анимация, при открытии страницы с использованием свойства
appear эти анимации срабатывают сразу, но нужно, что бы они сработали по очереди.
То есть, первая, через 1s вторая, через 2s третья. Не могу понять как это реализовать. Как "сказать" элементу transition, что старт нужно отложить на n секунд.

Answer 1

[0xD34F]

Рендерить элементы с задержкой:

data: () => ({
  items: [
    { show: false, ... },
    { show: false, ... },
    ...
  ],
}),
computed: {
  showItems() {
    return this.items.filter(n => n.show);
  },
},
mounted() {
  this.items.forEach((n, i) => setTimeout(() => n.show = true, i * 1000));
},

<transition-group name="fade">
  <div v-for="n in showItems" :key="n.id">{{ n }}</div>
</transition-group>

Comments

[VegasChickiChicki]

Весьма элегантное решение, но я поступил по другому. Сделал отдельный компонент, и добавил для тега transition параметры:

<transition appear v-on:before-enter="beforeEnter" v-on:enter="enter">

Описал поведение анимации через JS функции с помощью Velocity, и задержку передаю в функции, а так же входные параметры. Вышло очень даже ничего, как по мне. Могу вызвать компонент, передать в него нужные данные + время задержки, еще удобно тем, что можно добавить параметров и сделать компонент универсальнее.

Answer 2

[hzzzzl]

через css?

.anim-block:nth-of-type(1) {  transition-delay: 0s;  }
.anim-block:nth-of-type(2) {  transition-delay: 1s;  }
.anim-block:nth-of-type(3) {  transition-delay: 2s;  }