Question

我正在使用VueJs，我打算在表内的列表中生成动画，我希望在添加（执行推送）或消除（拼接）表内时生成动画。

尝试过渡小组，但我没有得到想要的东西。

我的代码如下，我正在使用VueJs，Bootstrap 4和Animatecss

<template>
    <thead class=" wow fadeIn animated">
        <tr>
            <th class="w-30">Name</th>
            <th class="w-10"></th>
        </tr>
    </thead>
    <transition-group name="bounceInUp" tag="tbody" class="wow animated" >
        <tr v-for="(product,index) in products" :key="index"
            >
            <td class="w-30">{{ product.name }}</td>
            <td class="w-10">
                <a class="btn-floating btn-sm btn-danger"
                    @click="deleteItem(index)">
                    <i class="fa fa-trash"></i>
                </a>
            </td>
        </tr>
    </transition-group>
</template>
<script>
export default{

    methods :{
        addItem(){
            this.products.push = {name:'Hello World'}
        }
        deleteItem(index){
            this.products.splice(index, 1);
        }
    }
}
</script>

Answer 1

Here，您找到了一个有效的示例，该示例向产品项中添加了布尔字段print(*(lambda x, y: (x+1, y*y))(*map(int, input().split()))) print(*(lambda x, y: (list(range(x)), y//2))(*map(int, input().split())))，当您添加/删除项时可以切换该字段，因为Vue过渡可以在条件渲染下正常工作（无需包括shown，因为我已经复制了给定的类和动画）：

animate.css

为什么不使用animatecss在Vue中执行动画

1 个答案: