这节课我们来学习一下多个元素间交替切换的动画效果，我们之前都是实现一个元素的入场和离场动画，那么这一节课我们来看一下多个元素间切换交替的动画效果。
我们来复制一下上节课的代码，删除一下不要代码。改成一个最基础的样子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow:false
}
},
methods: {
handelclick(){
this.isShow=!this.isShow
}
},
template: `
<Transition >
<div v-if="isShow">hello world</div>
</Transition>
<button @click="handelclick" >显示/隐藏</button>
`
})
const vm = app.mount("#app")
</script>
</html>这样我们实现了一个简单的元素切换显示效果。
元素间过渡
在这个代码基础上，我们再来添加一个div让它显示一个hello vue，让它在isShow=false的时候显示。给它设置一个v-else指令就好了。
<Transition>
<div v-if="isShow">hello world</div>
<div v-else>hello vue</div>
</Transition>
<button @click="handelclick" >显示/隐藏</button>像这样改了之后我们点击按钮时，会很生硬从hello world切换成hello vue，然后我们可以给它添加过渡效果，实现一个过渡切换。
<style>
.v-leave-to,.v-enter-from{
opacity: 0;
}
.v-leave-active,.v-enter-active{
transition: opacity 3s ease;
}
.v-leave-form,.v-enter-to{
opacity: 1;
}
</style>这样我们又会发现一个问题，当我点击按钮的时候，它会出现hello world在执行离场效果，而hello vue在执行入场效果，各自执行各自，这种效果可能不是我们想要的。
过渡模式
我们想要hello world消失了之后再显示hello vue，实现这样的效果我们只需要给Transition组件设置过渡模式 mode属性 mode="out-in"，表示执行顺序，先执行离场动画，再执行入场动画。当然也可以反过来设置成mode=“in-out”，先执行入场动画再执行离场动画，这种效果可能大家都不常用。
// mode="in-out"
template: `
<Transition mode="out-in">
<div v-if="isShow">hello world</div>
<div v-else>hello vue</div>
</Transition>
<button @click="handelClick" >切换</button>
`出现时过渡
如果我们想在元素一出现时就执行入场动画的话，我们可以给Transition组件谁知一个appear属性。
template: `
<Transition mode="out-in" appear>
<div v-if="isShow">hello world</div>
<div v-else>hello vue</div>
</Transition>
<button @click="handelClick" >切换</button>
`组件间过渡
我们居然可以给可以html元素来做切花动画，那么同样的效果我们可以使用在组件上。我们先来准备两个组件。
const componentA={
template:`<div>hello world</div>`
}
const componentB = {
template: `<div>hello vue</div>`
} 然后我们把下面两个div替换成组件，局部组件需要先注册哦。
template:`
<Transition mode="out-in" appear>
<componentA v-if="isShow" />
<componentB v-else />
</Transition>
<button @click="handelClick" >切换</button>
`这样我们换成组件之后，也是能正常执行的。
然后就是组件之间切换我们可以采用动态组件component，好像我们第一节课讲过的。
template:`
<Transition mode="out-in" appear>
<component :is="activeComponent" />
</Transition>
<button @click="handelClick" >切换</button>
`我们声明一个变量activeComponent来控制组件的切换。在handelClick方法里面设置activeComponent变量。
methods: {
handelClick() {
this.activeComponent = this.activeComponent=='componentA'?'componentB':'componentA'
}
},好这样运行起来看一下，我们的代码也是正常的。