Tailwind css animation for list with vue js

Hi all,

I cannot work out how to show list elements one after the others when the array is output with Tailwind,

Something like 1 fadeIn per "

" instead of having all of them showing at once.

eg:

 <transition-group
    name="staggered-fade"
    tag="ul"
    v-on:enter="fadeIn">
<li v-for="item in list">{{item.name}}</li> //fadeIn
  </transition-group>

At the moment if I add a transition, the entire list shows with a fadeIn.

Any idea how to use a fade-in per li item please?

Thanks

undeportedmexican

4 years ago

Level 15

Apparently vue supports this out of the box: https://vuejs.org/guide/built-ins/transition-group.html#staggering-list-transitions

From what I gather, the only thing you're missing is adding a :data-index attribute to your li and then use the onEnter hook to trigger the transition staggering. Something like this:

 <transition-group
    name="staggered-fade"
    tag="ul"
    v-on:enter="fadeIn">
            <li v-for="(item, index) in list" :key="index" :data-value="index">{{item.name}}</li> //fadeIn
  </transition-group>

And this in your <script>:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

I'm not an expert and I haven't tried is. But do let me know if it works!

Please or to participate in this conversation.