Staggering QTransition Group Animations (list-items)

[joefly]

Is there a recommended way to stagger QTransition Group Animations with Animate.css?

I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

Any suggestions or recommendations on how to achieve this?

Following is a stripped version of my current list component:

      <q-list no-border>
        <q-list-header>All Items:</q-list-header>
        <q-transition group appear enter="fadeIn"
        leave="bounceOutLeft">
          <q-item v-for="(item, index) in computedItems" :key="index">
                 // list item content
          </q-item>
        </q-transition>
      </q-list>

Thanks so much

[skypart]

https://codepen.io/thingnoystudio/pen/jOWXOeK?editors=0010