Vue中多個元素或元件的過度
阿新 • • 發佈：2018-12-11
多個元素的過度
對於原生標籤可以使用v-if/v-else.當相同標籤名的元素切換時，需要通過key特性設定唯一的值來標記，如下例：
<style> .v-enter, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ transition: opacity 1s } </style> </head> <body> <div id="root"> <transition> <div v-if="show" key="hello">Hello world</div> <div v-else key="bye">Bye World</div> </transition> <button @click="handleClick">toggle</button> </div> <script> var vm=new Vue({ el: '#root', data: { show: true }, methods: { handleClick: function () { this.show=!this.show } } }) </script> </body>
動畫：
Vue還提供了過度模式來實現不同的過度效果：
-
in-out：新元素先進行過渡，完成之後當前元素過渡離開。 -
out-in：當前元素先進行過渡，完成之後新元素過渡進入。
過度模式通過transition標籤的modle屬性新增
上例加入in-out模式：
<transition mode="in-out"> <div v-if="show" key="hello">Hello world</div> <div v-else key="bye">Bye World</div> </transition>
過渡效果 ：
上例加入out-in模式：
<transition mode="out-in">
<div v-if="show" key="hello">Hello world</div>
<div v-else key="bye">Bye World</div>
</transition>過渡效果：
2、元件間的過渡效果
實現方式與元素間元件過渡相同，並且過渡模式也相同。如下例：
<div id="root"> <transition mode="in-out"> <child v-if="show" ></child> <child-one v-else></child-one> </transition> <button @click="handleClick">toggle</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: { show: true }, methods: { handleClick: function () { this.show=!this.show } } }) </script>
過渡效果：
也可以通過動態元件實現，如下例：
<div id="root">
<transition mode="in-out">
<component :is="type"></component>
</transition>
<button @click="handleClick">toggle</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'
}
}
})
</script>