~ 过渡模式

[ Problem ] 代码示例

过渡模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式。

• in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
• out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

用 out-in 重写之前的开关按钮过渡：

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

// 只用添加一个简单的特性，就解决了之前的过渡问题而无需任何额外的代码。
// in-out 模式不是经常用到，但对于一些稍微不同的过渡效果还是有用的。