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 >
相关推荐
gnip23 分钟前
SSE技术介绍
前端·javascript
yinke小琪38 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿42 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
yinke小琪1 小时前
JavaScript 事件冒泡与事件捕获
前端·javascript
gzzeason1 小时前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone1081 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck1 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
iccb10132 小时前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端