vue 页面间过渡效果

原创 464122053 随笔 笔记 389阅读 2018-04-27 14:54:26 举报

基于vue-router 开发 spa 应用时,页面切换时总是直来直往的,效果很生硬,设置点动画呗,不懂就看文档了https://cn.vuejs.org/v2/guide/transitions.html

第一步, 分析想要的效果

1、 低层级页面向高层级页面切换时,前进的过渡效果, 反之,就是后退的过渡效果了,比如,列表页面,跳转到详情页面时,就是前进的过渡效果了。

2、同层级页面切换时,透明度过渡效果。

第二步,考虑实现方式

1、 注册页面路由时,定义页面的层级

2、监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

第三步 直接上代码

记录结束

欢迎来个人站点去瞅瞅 http://zhougang.online/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复