vue路由切换动画（转场动画）

通过transition 更改效果
html 复制代码
<template>
    <el-container class="h-100">
        <el-main>
            <transition :name="transitionName">
                <!-- <keep-alive v-if="$route.meta.keepAlive"> -->
                <router-view :key="$route.fullPath" />
                <!-- </keep-alive> -->
            </transition>
        </el-main>
    </el-container>
</template>

<script>
 export default {

    data() {
        return {
            transitionName: 'transitionLeft',
        };
    },
      watch: {
        '$route'(to, from) {
            const arr = ['coverSheet', 'home', 'product', 'about',]
            let toPath = to.path.split('/')[to.path.split('/').length - 1]
            let fromPath = from.path.split('/')[from.path.split('/').length - 1]

            if (toPath === 'coverSheet') {
                this.transitionName = 'transitionScale'
                return
            }
            if (fromPath === 'coverSheet' && toPath === 'home') {
                this.transitionName = 'transitionScale'
                return
            }
            //内页就直接切换
            if (arr.indexOf(toPath) == -1) {
                this.transitionName = 'transitionFade'
                return
            }	
            //判断,应该是左划还是右划效果，arr定义从左到右的页面路径
            this.transitionName = arr.indexOf(toPath) > arr.indexOf(fromPath) ? 'transitionLeft' : 'transitionRight'
        }
    },

}
</script>

<style lang="scss" scoped>
.transitionLeft-enter,
.transitionRight-leave-active {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    transition: all 0.4s ease-out;
}

.transitionLeft-leave-active,
.transitionRight-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    transition: all 0.4s ease-out;
}

.transitionLeft-enter-active,
.transitionRight-enter-active {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: all 0.4s ease-out;
}

.transitionScale-leave-active {
    transform: scale(1);
    transition: all 0.4s ease-out;
}

.transitionScale-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    transform: scale(0.4);
    transition: all 0.4s ease-out;
}

.transitionScale-enter-active {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transition: all 0.4s ease-out;
    bottom: 0;
}


.transitionFade-enter-from,
.transitionFade-leave-to {
    opacity: 0;
}

.transitionFade-enter-to,
.transitionFade-leave-from {
    opacity: 1;
}

.transitionFade-enter-active,
.transitionFade-leave-active {
    transition: opacity 0.01s linear 0s;
}
</style >