本文接:vue手机商城项目实战(7)-商品详情组件实现
我们发现在路由跳转的时候无论是点击底部选项卡,还是点击商品详情和搜索,页面跳转都比较生硬,因此我们可以考虑使用vue
提供的转场效果来优化用户体验。
1、需要给router-view
包裹transition
,App.vue
中修改如下:
<transition :name="transitionName"> <router-view></router-view> </transition>
2、在App.vue
中data新增两个属性:
data(){ return { // 转场名称 transitionName:'slide-forward', // map集合存放route先后顺序 map:new Map() } }
3、App.vue
侦听路由变化,根据是前进和后退实现不同的转场效果:
// 侦听路由变化 watch: { $route(to, from) { if (!this.map[to.path]) { // 过渡时间为0.5s this.map[to.path] = new Date().getTime() + 0.5; } if (!this.map[from.path]) { this.map[from.path] = new Date().getTime(); } if (this.map[to.path] > this.map[from.path]) { this.transitionName = 'slide-forward'; } else { this.transitionName = 'slide-back' } } }
4、在App.vue
的style
中新增转场样式:
/* 路由转场样式 */ .slide-forward-enter { transform: translate(100%); } .slide-forward-enter-active { transition: all .5s ease-in-out; } .slide-forward-leave-active { transform: translate(-100%); transition: all .5s ease-in-out; } .slide-back-enter { transform: translate(-100%); } .slide-back-enter-active { transition: all .5s ease-in-out; } .slide-back-leave-active { transform: translate(100%); transition: all .5s ease-in-out; }
注意:转场的组件需要时fixed固定定位,否则有可能导致转场效果异常