1.因Vue的复用机制，此处动画不会执行，可给元素添加唯一key值来使vue对该元素不进行复用。
2.先进入执行还是先出去执行，可在<transition>元素上设置：mode="in-out"或者mode="out-in"
3.组件的过渡和普通元素的用法一致。
4.动态组件的过渡需在动态组件内绑定is属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue中多个元素或组件的过渡</title> <script src="./vue.js"></script> <style> .v-enter,v-leave-to{ opacity：0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </style> </head> <body> <div id="root"> <transition mode="in-out"> <!-- <div v-if="show" key="hello">hello world</div> <div v-else key="bye">Bye world</div> --> <component :is="type"></component> <child v-if="show"></child> <child-one v-else></child-one> </transition> <button @click="handleClick">切换</button> </div> <script> Vue.component(‘child‘,{ template:‘<div>child</div>‘ }) Vue.component(‘child-one‘,{ template:‘<div>child-one</div>‘ }) var vm=new Vue({ el:‘#root‘, data:{ type:‘child‘ }, methods:{ handleClick:function(){ this.type=this.type===‘child‘?‘child-one‘:‘child‘ }, handleBeforeEnter:function(el){ el.style.color="red" }, handleEnter:function(el,done){ setTimeout(() =>{ el.style.color=‘green‘ },2000) setTimeout(() =>{ done() },4000) }, handleAfterEnter:function(el){ el.style.color=‘#000‘ } } }) </script> </body> </html>
原文：https://www.cnblogs.com/tengteng0520/p/12076688.html