这里以通过Vue Router切换不同组件来说明transition的用法。
在app.vue中有一个配置了切换效果的<router-view>：

...
<transition :name="transitionStyle">
    <router-view class="content" />
</transition>
...

由于要实现组件切换的前进后退效果，所以transition的name是动态绑定的，这里不讨论如何实现前进后退，只讨论其中的前进。

想要当前组件向左滑出去的同时，即将显示的组件从右滑动进来，就像iOS版本的微信的左滑切换效果。

很多初学者发现，按照文档设置了相应的class之后，组件之间的切换会出现空白，实际上这就是Vue的文档没有描述清楚的地方。

- 阅读剩余部分 -