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

Question

我想在动态添加时设置动画 <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

Answer 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>

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

Transition in Vue.js is working incorrectly

javascript

transitions

vuejs2