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 模板解析注意事项