Vue实践--页面转场效果

最近准备抽时间把ShirneCMS的Vue端写一下。做框架的时候，忽然想到了页面切换的转场动画。对比 App的页面切换效果, Vue在预设方面就不太友好了。

查了下官方文档，是通过在router-view或Vue组件外套一个Transation来实现的。

这样的话，问题就来了。如果在每个组件上套，切换效果也不好控制（不知道该进场还是离场），代码量也增加不少。

如果在router-view外套这个效果，那要么只给一个转场效果，要么要根据页面路由动态修改转场效果，控制起来也是比较麻烦。

网上搜索了些解决方案，大部分解决方案是通过路由的深度来确定是进场还是离场，并找到一个vueg的npm包。于是引用来试了下效果。

这是vueg插件作者发布的效果演示图

这个组件，只需要引入后在router-view上加一个v-transation属性，就可以自动根据预设和路由深度来判断进场或离场效果。并且能记住上一个页面，通过判断进场页面是否上一个页面来确定返回效果。

深入了解了下之后，发现上一页只是一个变量保存，如果连续多次切入页面再返回，效果就不一定是预期的多次返回效果了。

于是打算把原有的包克隆一套按自己的逻辑修改一下。

1. 首先, 将原来的一个变量记录上一页路由,改为一个数组记录历史路由

2. 其次,优化预设的map判断,处理预定的转场效果

3. 确定效果之后, 处理历史记录, 是push新的, 还是splice记录

这样简单优化之后, 多层页面进入并返回的效果, 已经达到预期了。

经过实践，发现有一个遗漏的问题，就是打开应用默认页非首页的情况 ，点击返回，则无论返回的是哪个页面，都会处理为进场效果（预期为返回效果），原因很简单，没有按路由深度判断，而且路由历史记录中不存在底层的一些页面，逻辑上自然就确定了是进场效果。

于是再次进行了些优化：

1. 增加根页面设置，处理完预设效果后，再判断切换的页面中是否有根页面，离开根页面总是使用进场效果，进入根页面总是使用返回效果

   根页面可理解为首页，或者带tab的应用的tab页的列表 

2. 增加了路由深度判断的选项，如果路由配置合理，则不需要设置根页面，直接开启深度判断，也能达到同样的效果

由于是在原组件上增加了历史记录的处理, 所以将组件改名为vuegHistory并单独发布。如果本组件的切换逻辑适合你的项目，欢迎试用。

vuegHistory转场效果演示(图片有压缩,仅演示进出场判定的效果)