Vue实践--页面转场效果

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

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

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

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


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

GIF.gif

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


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

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

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

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

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

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


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

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

于是再次进行了些优化:

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

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

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


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

vueg-history.gif

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