首先介绍下如何实现多元素过渡
(1)利用条件编译指令v-if与v-else实现多元素内容切换.
(2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果
1、transition添加name属性命名
2、设置过渡状态
(3)状态管理
测试后发现并没有过渡效果,分析原因Vue在多个元素切换过程中会尽量复用DOM,如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,由此产生一系列的bug.。
方案:给多元素添加不同key进行状态管理,代码如下
多元素过渡可以通过v-if条件指令进行控制