Staggering QTransition Group Animations (list-items)

  • 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"
              <q-item v-for="(item, index) in computedItems" :key="index">
                     // list item content

    Thanks so much 🙂

Log in to reply