<div id="app">
<!--
in-out 先进入在隐藏
out-in 先隐藏在进入
-->
<transition mode="out-in">
<!-- 动态组件 -->
<component :is="type"></component>
<!--
<child v-if="show">{{mess1}}</child>
<child-one v-else>{{mess2}}</child-one>
-->
</transition>
<button @click="handleClick">toggle</button>
</div>.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
Vue.component("child", {
template: "<div>child</div>"
});
Vue.component("child-one", {
template: "<div>child-one</div>"
});
var app = new Vue({
el: "#app",
data: {
mess1: "Hello World",
mess2: "Bye world",
type: "child"
},
methods: {
handleClick: function () {
this.type = this.type === "child" ? "child-one" : "child";
}
}
});
