Day20 样式变化(动画4)

元件间的转换

在元素间的转换可以更加简单,,因为有了这一个动态组件
当按下单选键A会出现Component A, 按下单选键B会出现Component B,藉由点击不同的选项,来淡出淡入不同的字串

列表转换(List transition)
以上都是处理单一元素的方法,当想要同时渲染整个LIST的时候,我们就可以使用

• 渲染的是实际元素的预设,可以更改tag属性解决
• 不能使用过渡模式,不可在互斥的元素中使用
• 内部的元素都需要有唯一的key
  
  

列表进入与离开过渡(List Entering/Leaving Transition)
在这个例子当中,有三个function分别数字,加入与移除,而其中给的key为”item” tag更改为,点选加入时便点选移除是随机移除, 会照着数字加入但唯一的缺点是位置为随机插入

参考资料 : https://vuejs.org/v2/guide/transitions.html#Transition-Modes