十、进阶之多个元素过渡

（1）不同标签之间的切换

问题1：transition标签中只能放一个元素，即只能过渡单个元素

解决：通过使用if和else进行切换多个元素

例：当显示1111时，2222消失。当显示2222时，1111消失

 

（2）相同标签之间的切换（设置不同的key值）

问题2：当有相同标签名的元素切换时，会直接复用原来的标签，只将标签内部的内容切换，从而导致切换的动画效果消失。

解决：使用key设置为唯一的值，让Vue对相同的标签进行区分（会重新创建不会复用）

 

（3）控制两个标签的消失和显示顺序

mode="in-out"：先显示再消失

mode="out-in"：先消失再显示