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

本文接：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固定定位，否则有可能导致转场效果异常