#持续划水中#

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

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

参考文章：（墙）

最终效果图：

今天在学习  的时候遇到了一个困扰了一下午的问题。

在根据官方文档提供的 中尝试给之前写的一个表格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;}
    
                
    
    
         
              
                   
ID
                   
品牌名称
                   
添加时间
                   
功能
              
         
         
              
                       
{
   {item.id}}
                       
{
   {item.name}}
                       
{
   {item.mTime}}
                       
删除
                  
                 
    
复制代码

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

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

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

为了验证这个<span>元素是否飘了，于是给transition-group默认生成的<span>元素通过tag属性改了个起名很随便的元素<testdiv>并重新打开了审查元素：

    
         ...
    复制代码

还真是你飘了。。。

官方文档的解释：

原来，在table里使用<transition-group>的时候，生成的真实元素<testdiv>之所以 会脱离table标签，并插到了table标签前，是因为 这个 <transition-group> 组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。

这里官方文档给出了一个解决办法：

于是我给<tbody>中添加这个 is 特性。由于是在<tbody>中用 is 添加的 transition-group ,因此也不会再默认生成一个<span>元素。

            {
   {item.id}}        {
   {item.name}}        {
   {item.mTime}}        删除    复制代码

查看效果：

完整代码：

    
        
        
            
            
    
        
     
            
                  
                  
      
                
       添加            
      
            
                  
      
                
       搜索            
      
        
     
        
     
                  
                       
                            
ID
                            
品牌名称
                            
添加时间
                            
功能
                       
                  
                  
                       
                            
{
   {item.id}}
                            
{
   {item.name}}
                            
{
   {item.mTime}}
                            
删除
                       
                  
             
    
    
        复制代码

----------------END

刚开始遇到这个问题，百度关键词 使用transition-group的注意事项 时一直找不到有效的方法。思考是不是 bootstrap 的 table （我也不知道为什么会觉得时bs的问题，但也算是误打误撞找到方法了◔◡◔）有问题的时候，百度以 table transition-group 为关键词进行搜索，翻了几页也没有找到解决方法（现在搜索第一页第一个就是解决的方法了，有点神奇。）。实在没找到方法后打开了google，搜索  table transition-group 。emmm，一页下来点开前三个，都是能解决的方法（这里得批评一下百度，要说第三个搜索结果连接被墙了百度搜不到还好说，但前两个都是gayhub里的，咋百度的时候就没出这两个连接呢 ´◔‸◔` ）。

也因此才知道，早在2016年，尤雨溪大神已经在vuejs的Issuse中有回答了。。。并且官方文档中也有 特殊特性 is 这个API的说明。。。API文档还是得多翻翻 - -

果然还是我太水了(||๐_๐)