.v-enter-form{ opacity: 0; }
.v-leave-active, .v-enter-active{ transition: opacity 3s ease-in; }
.v-leave-from, .v-enter-to{ opacity: 1; }
</style>
</head> <body> <div id="root"></div> <script> const ComponentA = { template: `<div> hello word</div>`, }
const ComponentB = { template: `<div> bye word</div>`, }
var app = Vue.createApp({ data(){ return { component:'component-a' } }, methods:{ handleClick(){ if(this.component === 'component-a'){ this.component = 'component-b' }else{ this.component = 'component-a' } } }, components:{ 'component-a': ComponentA, 'component-b': ComponentB }, template:` <transition mode="out-in" appear> <component-a :is ="component" /> </transition> <button @click="handleClick">切换</button> `, }).mount('#root')
</script>
</body> </html>