Vue.js 中的转换工作不正确答案

【问题标题】：Transition in Vue.js is working incorrectlyVue.js 中的转换工作不正确
【发布时间】：2017-12-20 06:22:07
【问题描述】：

我想在动态添加 <tr> 时对其进行动画处理。但它添加到 .这是我的代码。

<tbody>   
    <transition-group tag="tr" enter-active-class="animated fadeInUp">       
          <tr v-for="(product, index) in products" v-bind:key="product">                     
            <td>{{ index + 1 }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.quantity }}</td>
            <td>
              {{ product.price }}
              <span class="glyphicon glyphicon-remove control-btn pull-right" @click="removeProduct(index)"></span>
              <span class="glyphicon glyphicon-pencil control-btn pull-right" @click="show(index)"></span>
            </td>                     
          </tr>   
    </transition-group>
    <!-- Итого -->           
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td><strong>Итог:</strong> {{ total }}</td>
    </tr>
</tbody>

Screenshot of the DevTools

【问题讨论】：

刚看完这期，希望对你有帮助：github.com/vuejs/vue/issues/3907
@VitalyMatvievich 我以前见过这个问题，但它对我没有帮助。还有其他想法吗？谢谢你。
我认为唯一的方法是将表格更改为其他标签。看那个：jsfiddle.net/jaco2h22/57。表没有提供我们在这里需要的行为。这不是您所期望的，但我认为这是这里唯一的解决方案。例如，如果您的项目可能的话，我会将所有内容都更改为 flex 布局。
@VitalyMatvievich 我解决了问题
解决方案是什么？

标签： javascript vuejs2 transitions

【解决方案1】：

解决办法如下：

<transition-group tag="tbody" enter-active-class="animated fadeInUp">                 
    <tr v-for="(product, index) in products" v-bind:key="index">                     
          <td>{{ index + 1 }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.quantity }}</td>
          <td>
            {{ product.price }}
            <span class="glyphicon glyphicon-remove control-btn pull-right" @click="removeProduct(index)"></span>
            <span class="glyphicon glyphicon-pencil control-btn pull-right" @click="show(index)"></span>
          </td>                     
    </tr> 
</transition-group>

【讨论】：