Staggering QTransition Group Animations (list-items)
joefly last edited by joefly
Is there a recommended way to stagger QTransition Group Animations with Animate.css?
I’ve tried many different ways, including binding the
leaveattributes to methods, and then running a setTimeout, but this didn’t work.
I’ve also tried using a regular Vuejs
transition-groupand 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 :-)