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

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 您会找到一个工作示例，该示例将布尔字段 shown 添加到您的产品项目中，当您添加/删除项目时可以切换该字段，因为 Vue 转换在条件渲染中可以正常工作（无需包含 @987654323 @ 因为我复制了给定的类和动画）：

<template>
 <div>
        <table>
        <thead class=" wow fadeIn animated">
        <tr>
            <th class="w-30">Name</th>
            <th class="w-10"></th>
        </tr>
    </thead>
    <transition-group name="bounceInUp"  >
        <tr v-for="(product,index) in products" :key="index"
            v-if="product.shown">
    

            <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>
    </table>

     <button class="btn btn-floating" @click="addItem">Add new product</button>
 </div>
</template>
<script>
export default{
 data() {
    return{
    index:0,
      products:[{name:'Hello World',shown:true}]
    }
    },
    methods :{
        addItem(){

            this.products.push ( {name:'Hello World '+this.index})
            this.index++;
         this.products[this.products.length-1].shown=true;
        },
        deleteItem(index){
             this.products[index].shown=false;
            this.products.splice(index, 1);
        }
    }
}
</script>

<style>


.bounceInUp-enter-active {
  animation: bounceInUp .9s;
}
.bounceInUp-leave-active {
  animation: bounceInUp .9s reverse;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



</style>