vue手机商城项目实战(8)-路由跳转转场过渡动画效果实现

Web前端 潘老师 2个月前 (09-20) 164 ℃ (0) 扫码查看

本文接:vue手机商城项目实战(7)-商品详情组件实现
我们发现在路由跳转的时候无论是点击底部选项卡,还是点击商品详情和搜索,页面跳转都比较生硬,因此我们可以考虑使用vue提供的转场效果来优化用户体验。

1、需要给router-view包裹transitionApp.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.vuestyle中新增转场样式:

/* 路由转场样式 */
.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固定定位,否则有可能导致转场效果异常

vue手机商城项目实战(8)-路由跳转转场过渡动画效果实现


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (7)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!

登录