Vue.js表格行临时高亮过渡效果实现问题求助

我正在开发一个带CRUD功能的Vue.js视图，想给新增或修改后的记录行加1-2秒的高亮效果提升用户体验。之前的方案只能直接改变背景色，没有过渡动画；现在更新CSS后能实现淡出效果，但淡入还是无法触发。

现有代码 #

模板部分 #

<template>
    <v-container>
        <h2>Sponsors</h2>
        <v-table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="sponsor in sponsors" :key="sponsor.id" :class="{highlight: lastSponsorId === sponsor.id }">
                <td>{{ sponsor.name }}</td>
                <td>
                    <div class="btn-group">
                        <v-btn depressed color="success" @click="openEditDialog(sponsor)">Edit</v-btn>
                        <v-btn color="error" @click="deleteSponsor(sponsor)">Delete</v-btn>
                    </div>
                </td>
            </tr>
            </tbody>
        </v-table>
    </v-container>
</template>

脚本部分 #

<script>
....

export default {
    name: 'SponsorsIndex',
    components: {
        SponsorModal,
        ConfirmationDialog
    },
    ...
    watch: {
        ...
        lastSponsorId (val) {
            if (val !== null) {
                setTimeout(() => {
                    this.$store.dispatch('sponsors/resetLastSponsor');
                }, 1 * 1000);
            }
        },
    },
....
}
</script>

当前CSS（仅实现淡出） #

tr {
    transition: 1s all ease;
}
tr.highlight {
    background-color: #76b5c5;
    color: white;
}

解决方案 #

问题核心：新增记录时，DOM元素刚创建就直接带上highlight类，浏览器无法识别状态变化，自然不会触发淡入过渡。修改分两步：

1. 给新行的DOM渲染留缓冲时间
   在新增/修改赞助者的逻辑里，先更新sponsors数组，延迟20-50ms（给Vue足够的DOM更新周期）再设置lastSponsorId。比如在组件的新增方法中：

   async addSponsor(newSponsor) {
       // 先完成数据新增，让DOM渲染新行
       await this.$store.dispatch('sponsors/add', newSponsor);
       // 延迟标记高亮，确保新行已以默认状态渲染
       setTimeout(() => {
           this.$store.dispatch('sponsors/setLastSponsor', newSponsor.id);
       }, 20);
   }
   

2. 明确CSS的默认状态属性
   给默认状态的tr指定明确的背景色和文字色，避免浏览器对初始样式的不确定判断：

   tr {
       background-color: white;
       color: inherit;
       transition: background-color 1s ease, color 1s ease;
   }
   tr.highlight {
       background-color: #76b5c5;
       color: white;
   }
   

效果说明 #

• 新增行：先以白色背景渲染，再触发highlight类添加，浏览器捕捉到状态变化，触发淡入过渡；
• 修改行：DOM元素已存在，切换highlight类时会正常触发淡入淡出；
• 原有淡出逻辑不受影响，高亮1秒后自动恢复默认样式。

内容的提问来源于stack exchange，提问作者Denis