<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <body> <style> ul li{ width: 300px; text-decoration: none; margin: 5px 0px; border: 1px solid black; } ul li{ list-style: none; } ul li:hover{ background-color: hotpink; } /* 过度类动画 */ /* 动画进入前 元素移动到Y轴80px 不透明 离开后还会移动到80px这里操作就是translate 说明 如果定义rotate 那就在enter-active 是旋转的效果*/ .v-enter, .v-leave-to { opacity: 0; transform: rotate(180deg); } /* 开始动画的时候，动画会移动到原来的位置 执行过度效果*/ .v-enter-active, .v-leave-active { transition: all 0.6s ease; } </style> <div class="container"> <div> <label for=""> Id: <input type="text" v-model="id" > </label> <label for=""> Name: <input type="text" v-model="name" > </label> <input type="button" value="添加" v-on:click="add"> </div> <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --> <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --> <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --> <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --> <!-- transition-group中也可以写钩子函数 但是有点问题 我还没解决 --> <!--v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" --> <transition-group appear tag="ul" > <li v-for="(item, index) in listName" :key="item.id" @click="del(index)">{{item.id}}---------{{item.name}}--------{{item.number}} </li> </transition-group> </div> <script> var vm=new Vue({ el:'.container', data:{ id:'', name:'', listName:[ {id:'1',name:'时尚网吧',number:'2019'}, {id:'2',name:'怪兽电竞',number:'2017'}, {id:'3',name:'银河网络',number:'2017'} ] }, methods: { // 添加函数 add(){ this.listName.push({id:this.id,name:this.name,number:'2019'}); this.id=this.name=''; }, // 删除函数 del(i){ this.listName.splice(i,1); }, // // 动画生命周期函数 // beforeEnter(el){ // el.style.transform="translateY(80px)"; // el.style.opacty=0 // }, // enter(el,done){ // el.offsetHeight // el.style.transition="all 0.4s ease" // done() // }, // afterEnter(el){ // el.style.transform="translateY(0)" // }, }, }) </script> </body> </html>