Vue table使用transition组件过渡动画

        <table>
          <thead>
            <tr>
              <td>check</td>
              <td>name</td>
              <td>delete</td>
            </tr>
          </thead>
          
          <tbody is="transition-group"
            name="slide" mode="out-in">
        
          <tr v-for='task in tasks' v-bind:key='task'>
            <td><input type="checkbox" value="1" id="checkboxFourInout" name="" v-model="task.done"></td>
            <td><span :class=" {taskDone:task.done}">{{task.name}}</span></td>
            <td><button class="btn btn-danger " @click="deleteTask(task)">Delete</button></td>
          </tr>
          </transition>
          </tbody>
       </table>

一开始用TRANSITION组件老是不成功，后来才知道要用IS绑定，再后来在文档找到的解释如下：

DOM 模板解析注意事项

当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table> <my-row>...</my-row> </table>

自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table> <tr is="my-row"></tr> </table>

应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：

• <script type="text/x-template">
• JavaScript 内联模板字符串
• .vue 组件

因此，请尽可能使用字符串模板。

链接如下：

VUE DOM模板解析注意事项