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>