Vuetify，动画 v-data-table tr答案

【问题标题】：Vuetify, animate v-data-table trVuetify，动画 v-data-table tr
【发布时间】：2021-02-11 05:29:53
【问题描述】：

我有一个 v-data-table 组件，它偶尔会接收信息，我只想在进入时而不是在离开时为其设置动画。 vuetify 有内置的转换（我正在使用）来执行此操作，但在这种特殊情况下我无法设置像 mode 和 hide-on-leave 这样的道具。

基本上，我的目标是拥有一个包含一定数量这些元素的小部件，一旦达到最大数量，就删除最后一个元素并将新元素添加到顶部。

这是我迄今为止的工作代码：https://codepen.io/willcolmenares/pen/XWKVLNR?editors=1011

及相关部分代码：

<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>

您能告诉我如何实现这一目标吗？

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案1】：

好吧，最终添加了 css 类以获得流畅的动画（不显示和绝对位置）.. 但我仍然很好奇名称和内部 tbody 来自哪里，以及我可以发送哪些其他道具（我不在 vuetify 文档中找到这些信息）

【讨论】：