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

#持续划水中#

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

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

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

最终效果图：

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

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

/* 过渡的自定义的类名 */
.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;
}


"table table-striped table-inverse table-bordered">
    "thead-inverse">
        "demo" appear>
            "item in getFilter(key)" :key="item.id">
                

            
ID
            
品牌名称
            
添加时间
            
功能
        
    
    

        
{
   {item.id}}
                
{
   {item.name}}
                
{
   {item.mTime}}
                
"javascript:;" @click="handleDelect(item.id)">删除
            
        
    
复制代码

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

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

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

为了验证这个元素是否飘了，于是