动画-实现列表删除时候渐渐上浮效果

transform: translateY(80px)
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;

       }
       li:hover{
           background-color: bisque
           
       }

/* 下面的.v-move和v-leave-active配合和使用，能够实现列表的飘上来效果 */
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}

id:

            </label>
            <label>
                    name:
                    <input type="text" v-model="name">

                </label>
                <input type="button" value="增加" @click="add">
        </div>
            <ul>
                <!-- 在实现列表过度的时候，如果需要过渡的元素，是通过v-for要用tranditionGroup-->
                <transition-group tag="" name="">
                        <li v-for="(item,i) in list" :key="item.id" @click="del(i)" >{{item.id}}----{{item.name}}</li>

                </transition-group>

            </ul>
            </div>
            </body>
            <script>
                new Vue(
                    {
                        el: '#app',
                        data: {
                            id:'',
                            name:'',
                           list:[
                               {id:1,name:'zhangsan',age:1},
                               {id:2,name:'李四',age:12},
                               {id:3,name:'王五',age:13}
                           ]
                        },
                        methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法
                           add(){
                              this.list.push({
                                  id:this.id,name:this.name
                              })
                           },
                           del(i){
                            this.list.splice(i,1)
                           }
                        }
                    }
                )
            
            </script>