列表动漫效果的实现（删除功能）

代码

<template>
    <div>
      <div>
        <label>ID</label>
        <input type="text" v-model="id"></input>
        <label>名字</label>
        <input type="text" v-model="mingzi"></input>
       <button @click="add">添加</button>
      </div>
      <ul>
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del()">
          {{item.id}}----{{item.mingzi}}
        </li>
      </transition-group>
      </ul>
      <!--<my-com1></my-com1>-->
    </div>
</template>

<script >
    export default {
        name: "list",
      data(){
          return{
            id:'',
            mingzi:'',
            list:[
              {id:1,mingzi:'赵高'},
              {id:2,mingzi:'秦桧'},
              {id:3,mingzi:'王瑾'}
            ]
          }
      },
      methods:{
          add(){
            this.list.push({id:this.id,mingzi:this.mingzi})
            this.id=this.mingzi=''
          },
        del(i){
          this.list.splice(i,1)
        }
      }
    }
</script>

<style scoped>
  li{
    border:1px dashed #999;
    margin: 5px;
    line-height: 35px;
    padding-left: 5px;
    font-size: 12px;
    width: 100%;
  }
  .v-enter,.v-leave-to{
    opacity: 0;
    transform: translateY(80px);
  }
  .v-enter-active,.v-leve-active{
    transition: all 0.6s ease;
  }
  li:hover{
    background-color: deeppink;
    transition: all 0.8s ease;
  }
  .v-move{
    transition: all 0.6s ease;
  }
  .v-leave-active{
    position: absolute;
  }
</style>