38-Vue组件-切换动画

组件在切换时候牵涉到离开的组件和进入的组件,让我们一起来探讨这种时序上有问题的情景吧

mode默认.gif
modeout-in.gif

https://cn.vuejs.org/v2/guide/transitions.html#过渡模式

0.bugs

又是后bug出在细微的语法上或者文件路径上,这时候要在浏览器的控制器中定位错误代码

一.问题

image.png

简单的说,就是当一个按钮同时控制两个组件,一个离开,一个进入,默认情况下会同时进行

二.解决方法

image.png

简单的说,就是通过给transition添加mode属性调整进入和离开的顺序

三.代码验证