我想动态添加<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>
答案 0 :(得分:0)
以下是解决方案:
<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>