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

本文主要是介绍vue路由切换动画（转场动画），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过transition 更改效果

<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 >