之前我们学习了如何使用transition标签来实现单个元素或者单个组件的动画效果。
本课我将带大家学习如何使用transition标签实现多个单个元素或多个单个组件之间切换过程中的动画。
这是什么意思？示例代码：
代码解读：
先有一个hello world，然后我们写一个bye world。 hello world和bye world的显示我们用v-if等于显示，v-else控制，
如果 show 为 true，则显示 hello world。如果 show 为 false，则显示 bye world。
然后我们写了一个handleClick方法：
每次节目倒转的时候，我们可以看到此时的转场有两个元素，一个是hello world，一个是bye world，
然后通过show控制这两个元素进行切换，
点击切换到hello world，再次点击切换到bye world：
所以实际上这是两个单个元素之间的切换。 之前，我们的第一个元素是 hello world 元素，第二个元素是 bye world 元素。它们之间被切割了一个元素。 ,我把它放在转场里了：
如果我想让单个元素的切换有一些动画效果，可以看到现在也写了转场，但是这两个单个元素切换时没有动画效果。如果有动画效果，该怎么写呢？
这里只需要写一个即可，比如输入.v-enter-from 也就是说，切换这两个元素时，有一个要显示的元素，一个要显示的元素显示。隐藏。示例代码：
.v-enter-from
显示的元素和动画也需要写v-enter-from，
第一次显示的时候，我把它的不透明度改为0，然后当它在显示过程中v-enter-active时，我要求它的过渡给它三秒的缓入时间，
然后在 v-enter-to 中，
当我完全进入结束动画的过程时，动画就结束了，我把它的不透明度变成了1，
是切换时立即显示的组件。 会有动画效果。比如当show变为true时，hello world组件就会有动画效果，
show为false时，会显示bye world，并且by world元素也会有动画，并实现入口动画。
我们再写一下出场的动画吧，v-leave-from，
当它出现时，此时它的不透明度一开始应该是1：
然后退出动画其实也是一样的。与进入动画v-enter-active相同。我们把v-enter-active变成v-leave -active，出来的时候不透明度也修改了。当它结束的时候，我应该说它的v-leave-to，也就是说，当它结束的时候，它的不透明度应该变成什么？
v-enter-active
v-leave -active
变为 0:
这么写的话，我们看两个单个元素之间切换显示的时候，会不会有过渡动画效果呢？ 刷新，点击切换：
您会发现一种显示动画效果和一种隐藏动画效果。
其实这两个动画效果基本上看起来像是一起执行的，
可以看到，执行完毕，然后整体动画效果结束。但有时候我们一般不会让这个东西做这种切换。一般我们希望例如hello world也是这样的状态。当我点击切换时，hello world先隐藏bye world再显示，而不是同时隐藏和显示。这个时候我该怎么办呢？
如果你希望达到一个效果，可以在过渡上写一个模式等于先出入，也就是说先隐藏再显示，先出去再进来。
这个模型写完了，我们来看一下。可以先隐藏再显示：
比如我们也可以采用先入后出的方式，即先输入再隐藏。 点击看先进入，然后慢慢隐藏：
这是in-out和out-in之间的区别：
但是如果不写的话，这个动画的效果会是什么样子呢？
如您所见，这是两个应该一起执行的动画：
如果你什么都不写，它们就会一起被执行。如果in-out就是先入后出，如果out-in就是先出后入。
使用这样的过渡标签来包裹两个单个元素，
我们可以配合一些样式来实现各个元素之间的切换过程，从而达到切换效果。
但其实这里还有一个小问题。当我第一次进入时，显示的是再见世界。 希望再见世界刚进入的时候能有动画效果，
我点击切换成为hello world，然后当我再次点击切换时，这个bye world就会有动画，但是如果我第一次直接刷新页面，当我进入这个页面时，就没有动画了由世界。 如果你想在第一次进入页面时有一个bye world显示的动画，这时候其实很简单。只需要在transition标签中添加appear这样的属性即可：
的意思是，当我第一次显示某个默认元素时，我也会给它我们写的动画效果。 我们写入appear并保存，然后在页面刷新：
正如你所看到的，当你第一次进入时，再见世界也会有一个渐进的效果。单击或隐藏。当然时间比较慢，因为我上面写的动画时长是三秒，对我来说有点太长了。可以写成一秒：
像这样的多个单元素标签之间的切换可以通过过渡标签来实现：
其实除了切换多个单元素标签之外，
然后我们再写一个来在多个单个组件之间切换。 我们来看看多个单一组件之间的切换。 其实我们还可以利用transition来帮助我们实现切换过程的动画效果。
首先，我在这里写两个组件。我们定义两个组件，例如:
如何使用子组件？
是一个组件吗？然后我们写一个对象：
然后：
现在用一个组件替换标签，并在多个单个组件之间切换。这样的动画效果也是可以实现的。您只需要在外层添加过渡即可。 Mode 的功能和appear一模一样，但是在切换组件的时候，除了使用这种写法之外，我们之前也讲过一个动态组件，
我们也可以直接使用组件之类的标签，然后这样写：
此时除了使用v-if、v-else等语法之外，如果使用is语法，也可以实现同样的动画效果。 在做多个单个组件之间的切换动画时，除了使用 v-if、v-else 等指令外，我们还可以使用 component :is 这样的语法， 通过动态组件实现多个单个组件之间切换的动画效果。
此时除了使用v-if、v-else等语法之外，如果使用is语法，也可以实现同样的动画效果。
在做多个单个组件之间的切换动画时，除了使用 v-if、v-else 等指令外，我们还可以使用 component :is 这样的语法，
component :is
通过动态组件实现多个单个组件之间切换的动画效果。
