transition-group在table表格中失效的问题

#持续划水中#

本文章仅用作于个人学习笔记复制代码

划重点 —— 个人笔记！(◔◡◔)

参考文章：（墙）Vuejs transition on table rows

最终效果图：

今天在学习 Vue的过渡&动画 的时候遇到了一个困扰了一下午的问题。

在根据官方文档提供的 列表过渡 中尝试给之前写的一个表格demo中的<tbody>下的<tr>行添加过渡效果的时候发现，过渡并没有出现。看着列表过渡的介绍仿佛代码也没有错啊(๑òᆺó๑)。代码如下：

/* 过渡的自定义的类名 */
.demo-enter,
.demo-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.demo-enter-active,
.demo-leave-active {
    transition: all 0.5s ease;
}
        
.demo-move {
    transition: all 0.5s ease;
}

<!-- HTML table部分 -->
<table class="table table-striped table-inverse table-bordered">
    <thead class="thead-inverse">
        <tr>
            <th>ID</th>
            <th>品牌名称</th>
            <th>添加时间</th>
            <th>功能</th>
        </tr>
    </thead>
    <tbody>
        <transition-group name="demo" appear>
            <tr v-for="item in getFilter(key)" :key="item.id">
                <td>{
   {item.id}}</td>
                <td>{
   {item.name}}</td>
                <td>{
   {item.mTime}}</td>
                <td><a href="javascript:;" @click="handleDelect(item.id)">删除</a></td>
            </tr>
        </transition-group>
    </tbody>
</table>复制代码

对比官方文档仍没找到错误，于是打开审查元素，发现......

这个空的span标签（红框位置）是哪来的？？？

<tbody>下不是应该有一个由transition-group默认生成的<span>标签包着的吗？咋不见了？？难道是渲染到了上面莫名其妙出来的那个<span>标签那里了？？？

为了验证这个&