vue-router实现路由动画

使用trsansition包裹router-view

<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>

在data中定义动画的名字

data() {
    return {
        transitionName: "slide-left"
    };
},

使用watch监听路由

watch: {
    $route(to, from) {
        const toDepth = to.path.split("/").length;
        const fromDepth = from.path.split("/").length;
        console.log(toDepth, fromDepth);
        this.transitionName =
        toDepth < fromDepth ? "slide-right" : "slide-left";
        console.log(this.transitionName);
    }
}

CSS样式

.Router {
position: absolute;
width: 100%;
transition: all 0.8s ease;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}

完整代码：

<template>
    <div>
        <van-nav-bar title="我的" left-text="返回" left-arrow @click-left="onClickLeft"/>
        <div>
            <p>用户名：{{getUser.username}}</p>
            <p>用户ID：{{getUser._id}}</p>
        </div>
        <van-cell title="收货地址" to="/my/address" is-link/>
        <van-cell title="全部订单" to="/orderList" is-link/>
        <van-cell title="已付款" to="/orderList?state=1" is-link/>
        <van-cell title="未付款" to="/orderList?state=0" is-link/>
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            transitionName: "slide-left"
        };
    },
    computed: {
        ...mapGetters(["getUser"])
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        }
    },
    watch: {
        $route(to, from) {
            const toDepth = to.path.split("/").length;
            const fromDepth = from.path.split("/").length;
            console.log(toDepth, fromDepth);
            this.transitionName =
                toDepth < fromDepth ? "slide-right" : "slide-left";
            console.log(this.transitionName);
        }
    }
};
</script>

<style scoped>
.top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    max-height: 8rem;
    background: #ccc;
    flex-direction: column;
}
.Router {
    position: absolute;
    width: 100%;
    transition: all 0.5s ease;
}
.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}
</style>