<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
<style>
.myfade-enter, .myfade-leave-to {
opacity: 0;
}
.myfade-enter-active, .myfade-leave-active {
transition: opacity 2s;
}
</style>
</head>
<body>
<div id="app">
<!-- 给<transition>添加mode设置过渡的模式 -->
<!-- in-out, 显示的先进来,隐藏的再出去 -->
<!-- out-in,隐藏的先出去,显示的再进来 -->
<transition name="myfade" mode="out-in">
<!-- 多元素使用过渡时避免Vue的复用机制,可以在元素上添加key -->
<!-- <div v-if="show" key="one">Vue中多个元素的过渡111</div> -->
<!-- <div v-else key="two">Vue中多个元素的过渡222</div> -->
<!-- 使用动态组件设置多组件的过渡 -->
<component :is="type"></component>
</transition>
<button @click="handleBtnClick">切换</button>
</div>
<script>
Vue.component("child-one", {
template: "<div>Vue中多个组件的过渡111</div>"
})
Vue.component("child-two", {
template: "<div>Vue中多个组件的过渡222</div>"
})
var vm = new Vue({
el: "#app",
data: {
show: true,
type: "child-one"
},
methods: {
handleBtnClick: function() {
// this.show = !this.show
this.type = this.type === "child-one" ? "child-two" : "child-one"
}
}
})
</script>
</body>
</html>