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 >
相关推荐
zuo-yiran8 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837758 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10248 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
光影少年8 小时前
React Native 第三章
javascript·react native·react.js
一川_8 小时前
虚拟滚动的幽灵:从搜索失准到丝滑体验的救赎之旅
javascript
abiao19818 小时前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
LoveDreaMing8 小时前
微前端-无界的实操和源码分析
前端·javascript·架构
修炼前端秘籍的小帅8 小时前
精读《JavaScript 高级程序设计 第4版》第6章 集合引用类型(三)Map、WeakMap、Set、WeakSet
开发语言·javascript·ecmascript
十八朵郁金香9 小时前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
麦麦大数据9 小时前
F042 A星算法课程推荐(A*算法) | 课程知识图谱|课程推荐vue+flask+neo4j B/S架构前后端分离|课程知识图谱构造
vue.js·算法·知识图谱·neo4j·a星算法·路径推荐·课程推荐