How to delay animation of transition element?

Question

Vue.js

The bottom line is that there are 3 blocks, they have one animation, when you open the page using the property
appear, these animations work immediately, but you need them to work in turn.
That is, the first, after 1s the second, after 2s the third. I can't figure out how to implement it. How to "tell" the transition element that the start should be delayed by n seconds.

Answer 1

Render elements with a delay :

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>

Answer 2

via 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;  }