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

Web前端 潘老师 4年前 (2020-09-20) 2748 ℃ (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)-路由跳转转场过渡动画效果实现


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1292.html
喜欢 (7)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】