1.列表过渡使用<transition-group>标签包裹动画元素。
2.然后对v-enter,v-leave-to,v-enter-active,v-leave-active写入css样式即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue中多个元素或组件的过渡</title> <script src="./vue.js"></script> <style> .v-enterr,v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </style> </head> <body> <div id="root"> <transition-group> <div v-for="item of list" :key="item.id">{{item.title}} </div> </transition-group> <button @click="handleBtnClick">Add</button> </div> <script> var count=0; var vm=new Vue({ el:'#root', data:{ list:[] }, methods:{ handleBtnClick:function(){ this.list.push({ id:count++, title:'hello world' }) } } }) </script> </body> </html>