1. 多个元素或组件的过渡
多个元素的过渡：
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<transition mode="out-in"> <div v-if="show" key="hello">hello world</div> <div v-else key="bye">Bye world</div> </transition>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多个元素或组件的过渡</title> <script src="../../vue.js"></script> <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <body> <div id="app"> <transition mode="out-in"> <div v-if="show" key="hello">hello world</div> <div v-else key="bye">Bye world</div> </transition> <button @click="handleCLick">click me</button> </div> <script> var vm = new Vue({ el:"#app", data:{ show:true }, methods: { handleCLick: function () { this.show = !this.show }, } }) </script> </body> </html>
多个组件的过渡：
<transition> <child-one v-if="show"></child-one> <child-two v-else></child-two> </transition>
通过component标签
<transition mode="out-in"> <component :is="type"> </component> </transition>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多个元素或组件的过渡</title> <script src="../../vue.js"></script> <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <body> <div id="app"> <!--<transition mode="out-in">--> <!--<div v-if="show" key="hello">hello world</div>--> <!--<div v-else key="bye">Bye world</div>--> <!--</transition>--> <!--<transition>--> <!--<child-one v-if="show"></child-one>--> <!--<child-two v-else></child-two>--> <!--</transition>--> <!--<button @click="handleCLick">click me</button>--> <!--通过动态组件的方式--> <transition mode="out-in"> <component :is="type"> </component> </transition> <button @click="handlechildCLick">click me</button> </div> <script> Vue.component('child-one',{ template:'<div>child one</div>' }) Vue.component('child-two',{ template:'<div>child two</div>' }) var vm = new Vue({ el:"#app", data:{ show:true, type:'child-one' }, methods: { handleCLick: function () { this.show = !this.show }, handlechildCLick:function () { this.type = this.type==='child-one'?'child-two':'child-one' } } }) </script> </body> </html>
2.列表过渡
<transition-group> <div v-for="item in list" :key="item.id"> {{item.title}} </div> </transition-group>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表过渡</title> <script src="../../vue.js"></script> <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <body> <div id="app"> <transition-group> <div v-for="item in list" :key="item.id"> {{item.title}} </div> </transition-group> <button @click="handleCLick">click me</button> </div> <script> var count = 0; var vm = new Vue({ el:"#app", data:{ list:[] }, methods:{ handleCLick:function () { this.list.push({ id:count++, title:'hello world' }) } } }) </script> </body> </html>
3.动画封装
template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter"> <slot v-if="show"></slot> </transition>`,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画封装</title> <script src="../../vue.js"></script> </head> <body> <div id="app"> <fade :show="show"> <div>Hello world</div> </fade> <fade :show="show"> <h1>Hello world</h1> </fade> <button @click="handleCLick">click me</button> </div> <script> Vue.component('fade',{ props:['show'], template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter"> <slot v-if="show"></slot> </transition>`, methods:{ handleBeforeEnter:function (el) { el.style.color = 'red' }, handleEneter:function (el,done) { setTimeout(()=>{ el.style.color = 'green' done() },2000) } } }); var count = 0; var vm = new Vue({ el:"#app", data:{ show:true }, methods:{ handleCLick:function () { this.show = !this.show; } } }) </script> </body> </html>