Javascript 为什么不使用Animate.css在Vue中执行动画

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

尝试过渡组，但我没有得到我想要的

我的代码如下，我使用的是VueJS、Bootstrap4和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>

名称
{{product.name}
导出默认值{
方法：{
附加项（）{
this.products.push={name:'Hello World'}
}
删除项目（索引）{
本标准。产品。拼接（索引，1）；
}
}
}

您会发现一个工作示例，该示例向您的产品项中添加了一个布尔字段

（如图所示）

，当您添加/删除一个项时可以切换该布尔字段，因为Vue转换可以很好地进行条件渲染（无需包含

animate.css

，因为我已经复制了给定的类和动画）：

名称
{{product.name}
添加新产品
导出默认值{
数据（）{
返回{
索引：0，
产品：[{名称：'Hello World'，显示：true}]
}
},
方法：{
附加项（）{
this.products.push（{name:'Hello World'+this.index}）
这个.index++；
this.products[this.products.length-1].show=true；
},
删除项目（索引）{
this.products[index].show=false；
本标准。产品。拼接（索引，1）；
}
}
}
.bounceInUp输入活动{
动画：弹跳9秒；
}
.bounceInUp保持活动状态{
动画：反弹跳9秒；
}
@关键帧反弹NUP{
从…起
60%,
75%,
90%,
到{
-webkit动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
}
从{
不透明度：0；
-webkit转换：translate3d（0，3000px，0）；
变换：translate3d（0，3000px，0）；
}
60% {
不透明度：1；
-webkit转换：translate3d（0，-20px，0）；
变换：translate3d（0，-20px，0）；
}
75% {
-webkit转换：translate3d（0,10px,0）；
转换：translate3d（0，10px，0）；
}
90% {
-webkit转换：translate3d（0，-5px，0）；
变换：translate3d（0，-5px，0）；
}
到{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
}

您想要哪个动画？animatecss classIt的bounceInUp尚未运行，是否需要将标记添加到trasition组？由于列没有对齐，我使用的是单文件组件，您指的是哪个标记？但是我的例子是有效的，你可以检查给定的链接，我是说你不需要它的标记，也可以设置动画。cssyes，它们不能工作，因为你需要复制每个类，并且在

中。classAnimName保持活动状态
和
。classAnimName输入活动状态
，e、 g:
fadeInLeft进入活动状态
和
fadeInLeft离开活动状态