<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> li{ /* line-height: 40px; */ border: 1px dashed #1B6D85; margin: 15px; cursor: pointer; padding: 12px; width: 100%; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } li:hover { background-color: hotpink; transition: all 0.8s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> </head> <body> <div id="app"> <!-- 如果是要过渡的效果是多个，v-for 生成的不能用 不能使用 transition 包裹，需要使用 transitionGroup --><!-- @click="add(item.id,item.name)" @click="add(item.id,item.name)"--> <transition-group> <li v-for="(item,i) in list" :key="item.id" @dblclick="del(i)"> {{item.id}} ==> {{item.name}} </li> </transition-group> </div> <script type="text/javascript"> var vm=new Vue({ el:‘#app‘, data:{ flag:true, list:[ {id:1,name:"小明1"}, {id:2,name:"小明2"}, {id:3,name:"小明3"}, {id:4,name:"小明4"}, {id:5,name:"小明5"} ] }, methods:{ add(id,name){ this.list.push({id:id,name:name}) }, del(id){ this.list.splice(id,1) } } }) </script> </body> </html>
原文：https://www.cnblogs.com/shangrao/p/13027344.html