Vue2-Transition转场动画的使用3（多个元素和组件的转场）

三、多个元素和组件的转场1、多个元素的转场（1）对于原生标签，我们可以使用v-if/v-else实现多元素转换。下面是列表显示和数据为空提示的过渡：0">抱歉，没有找到item。

(2)如果有两个以上的元素transitions，可以这样写：注意：在标签名相同的元素之间切换时，需要设置一个唯一的值通过key属性Markup让Vue区分它们，否则Vue为了效率只会替换同一个标签内的内容。编辑保存取消（3）在某些场景下，也可以给相同的元素v-if和v-else的key属性设置了不同的状态。上面的例子可以重写为：{{buttonMessage}}//...computed:{buttonMessage:function(){switch(this.docState){case'saved':return'Edit'case'edited':return'Save'case'editing':return'Cancel'}}}2、transitionmode(1)transitionmode常与多个配合在元素或多个组件之间切换时使用。有两种模式：in-out：新元素先跳转，完成后当前元素跳转离开。（默认为该模式）out-in：当前元素先转出，退出完成后新元素转入。(2)下面是element组件切换的例子。注意，我把过渡模式设置为（out-in）：每次点击切换按钮，下方的“分量1”和“分量2”会交替切换显示。切换时，当前组件会逐渐消失，新组件在完全消失后会逐渐出现。3,多个组件Transition(1)多个组件的过渡就简单多了，我们不需要使用key这个特性(2)下面代码的作用和效果和上面一样，只不过这次我们改用动态组件。