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

    Thanks so much 🙂


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.