多个元素的过渡效果
对于多个元素进行切换时，我们可用v-if/vue-else来做，如下图框2中。要想给他们添加过渡效果，就得增加过渡的动画，但是如下图这样写，过渡动画是不能生效的。
因为当有相同标签名的元素切换时，需要通过key值来设置唯一性，好让Vue来区分它们，否则Vue为了效率只会替换相同标签内部的内容，所以要记得用key值区分一下。
这样加上key
就会出现明显的动画切换的效果，如下图：
这样这样
对于key值也有几种合并方法：
1.一些场景key可以设置不同的状态来代替v-if和v-else
我是原版1
重写后：
我是重写1
2.使用多个v-if的多个元素的过渡，可以重写为绑定了动态属性的单个元素过渡
我是原版2
重写后：
我是重写2-1
我是重写2-2
上面是个关于key值的小插曲，在Vue中<transition> 的默认行为 - 进入和离开同时发生，但是有的时候想要别的效果，SOVue中在transition中还提供了mode参数来设置多个属性切换的效果（过渡模式）。
mode有两个值:
1.in-out：新元素先进行过渡，完成之后当前元素过渡离开（比如先进入再隐藏）。
2.out-in：当前元素先进行过渡，完成之后新元素过渡进入（比如先隐藏再显示））。
多个组件的过渡效果
多个组件的过渡不需要用到key的特性，可用到之前学的知识点——动态组件。
本来我们可以是这样写：
之前的做法
通过动态组件是这样写的：
模板处这样写
让
type和模板通过is绑定
image.png
判断一下
type的值，如果type===child，则修改成child-one，否则改成child，这样就可以通过is关联的数据，来控制type的值在child和child-one中切换。
网友评论