Vue Router页面跳转方向动画自动判断
vue-router 的页面跳转动画搞得还挺花的，尤其是那种左右翻页的效果，做得好能大大提升用户体验。之前搞移动端 SPA 项目的时候，我用的是 vue + vue-router + vuex + mint-ui 那套组合，动画加上以后切换感觉顺了不少。
其实原理不复杂，就是根据页面路径的层级关系，判断一下是前进还是后退，切换不同方向的动画。举个例子，从一级页面跳到二级页面，动画就应该是从右往左；返回的话就反过来，从左往右。这时候就得靠 vue-router 的 beforeEach 钩子出场了。
在 beforeEach 里你能拿到 to 和 from 两个对象，可以用路径或者自己定义的 meta.index 来比大小。简单判断下，是往下跳就设 rightin，是返回就设 leftin，给 :name 绑定这个值。
CSS 动画那块就更简单了，用 transform: translateX 和 opacity 做平移动画就够了。页面里 router-view 包一下 transition，加上你定义的几个类名就行。样式可以按你项目风格来调整，比如加个 ease-in-out 让动画柔一点。
哦对了，别忘了如果页面比较复杂，建议配合 keep-alive 缓存一下组件，不然每次回来都重渲染，动画再丝滑也白搭。
如果你也在搞移动端 SPA，又想加点页面切换的动效，不妨试试这个方案，代码量不多，体验提升还挺。
文件大小：56.27KB
评论区