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

Question

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

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

我的代码如下所示，我使用的是VueJS、引导程序4和动画

<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

这里您可以找到一个工作示例，该示例将布尔字段shown添加到产品项中，可以在添加/删除项时进行切换，因为Vue转换在条件呈现中运行良好(不需要包含animate.css，因为我复制了给定的类和动画)：

​

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

​