How to combine Quasar's virtual-scroll component with animated item transitions?

Question

I'm trying to use q-virtual-scroll combined with a transition or transition-group. Unfortunately, the default content slot of the q-virtual-scroll component adds in some extra html tags, which causes the direct children of the transition-group component to not have unique keys. This causes the contained items to be unable to adhere to the transition(-group) animations.

My code looks like this:

<q-virtual-scroll :items="items" v-slot="{ item }">
   <transition leave-active-class="animated fadeOut">
      <div class="row q-col-gutter-x-md">
         <div class="col">
             <div class="row q-col-gutter">
                {{ item.text }}
             </div>
         </div>
     </div>
   </transition>
</q-virtual-scroll>

This doesn't generate any animation effect.

Hence my question: is it possible to combine the q-virtual-scroll component with transition-group animations?

Answer 1

You can use QIntersection I think. It will provide similar kind of transition that you need.

    <q-virtual-scroll
      style="max-height: 300px;"
      :items="heavyList"
      separator
      v-slot="{ item, index }"
    >
      <q-intersection
        :key="index"
        transition="flip-right"
        class="example-item"
      >
        <q-item
          dense
        >
          <q-item-section>
            <q-item-label>
              #{{ index }} - {{ item.label }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-intersection>
    </q-virtual-scroll>

Here is Doc - https://quasar.dev/vue-components/intersection#qintersection-api

Github - https://github.com/pratik227/virtual_scroll_demo

Demo - https://jazzy-smakager-bbb253.netlify.app/#/