举例：vue项目
1、在路由表中修改
在vue中
路由表定义meta属性index 值用index值来判断是左移还是右移
2、 在App入口文件处
<router-view v-slot="{ Component }"> <transition :name="transitionName" mode="out-in"> <component :is="Component" /> </transition> </router-view>
data() { return { // schema: "MainFade", transitionName: "slide-left", }; },
watch: { //使用watch 监听$router的变化 $route(to, from) { //如果to索引大于from索引,判断为前进状态,反之则为后退状态 if (to.meta.index > from.meta.index) { //设置动画名称 this.transitionName = "slide-left"; } else { this.transitionName = "slide-right"; } }, },
//css样式 .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 500ms; position: absolute; } .slide-right-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); }
vue完整App
<template> <div> <router-view v-slot="{ Component }"> <transition :name="transitionName" mode="out-in"> <component :is="Component" /> </transition> </router-view> </div> </template> <script> export default { name: "AppTestApp", data() { return { // schema: "MainFade", transitionName: "slide-left", }; }, mounted() {}, methods: {}, watch: { //使用watch 监听$router的变化 $route(to, from) { //如果to索引大于from索引,判断为前进状态,反之则为后退状态 console.log(to, "to"); console.log(from, "from"); if (to.meta.index > from.meta.index) { //设置动画名称 this.transitionName = "slide-left"; } else { this.transitionName = "slide-right"; } }, }, }; </script> <style> .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 500ms; position: absolute; } .slide-right-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .slide-left-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); } </style>
如果是其他框架上中(React,umi,…)
逻辑都是一样的
实现思路：
1、 在router路由表中定义meta属性中的index，
2、在入口文件处判断to和from中的index值大小，来进行路由动画的切换
