Vuetify, animate v-data-table tr

Question

I have a v-data-table component that is receiving info once a while, I want to animate it only when is entering and not when is leaving. vuetify has built-in transitions (which I'm using) to do so, but I'm unable to set props like mode and hide-on-leave in this particular scenario.

basically, my goal is to have a widget with a certain amount of those elements, and once it reaches the max amount, removes the last element and adds to the top the new one.

Here is a codepen of my work so far: https://codepen.io/willcolmenares/pen/XWKVLNR?editors=1011

and relevant part of the code:

<template v-slot:body="{ items }">
  <tbody name="slide-x-transition" is="transition-group">
    <tr v-for="item in items" :key="item.text">
      <td>
        <div class="text-center">{{ item.text }}</div>
      </td>
    </tr>
  </tbody>      
</template>

Can you provide me an idea of how to achieve this?

William Colmenares William Colmenares · Accepted Answer · 2020-10-28T22:07:50

well, ended up adding css classes to have a smooth animation (display none & position absolute).. But I'm still curious where name and is inside tbody comes from, and also what other props can I send (I dont find any of this info in vuetify docs)

Vuetify, animate v-data-table tr

1 Answers