h5页面路由切换动画-左右横滑效果（v2）

醉逍遥neo

已于 2022-04-19 10:51:22 修改

阅读量8k

点赞数 6

分类专栏：实现文章标签：前端 javascript vue.js react slide

于 2021-11-12 14:35:06 首次发布

本文链接：https://blog.csdn.net/u010059669/article/details/121287646

版权

实现专栏收录该内容

12 篇文章 5 订阅

订阅专栏

h5实现仿微信那种页面切换时左右横滑的动画效果，页面前进时新页面从右往左滑，页面后退时旧页面从左往右滑。

之前详细阐述了v1版本的实现思路和代码，后来在实践过程中发现v1存在的诸多问题，已经做了重构，所以这里分享一下新的实现方式，且称为v2版本吧，核心思路还是一样的。（以下内容包含v1和v2）

已封装成vue组件
支持vue2及vue3

v1

一、思路分析

只实现路由切换动画很简单，只需要给路由出口router-view用transition元素包装一下，加上过渡样式即可：

<transition :name="myName">
  <router-view/>
</transition>

但这里要实现的动画效果是页面前进后退不一样，问题的难点就在于如何区分页面前进和后退。

百度了一下，网上实现的方式千奇百怪，但大多都不是我想要的，我希望的效果是：
1.低侵入，不会对已有的代码造成影响；
2.使用方便，不需要额外配置，不会对以后写其他代码造成限制。

其实就是保证封装独立性和代码低耦合。

本文判断前进后退的思路也是借鉴了网上的代码，大概思路：

vuex里定义一个数组arr，用于存储访问过的路由记录，再定义一个字符串str，用于标识前进或后退。
路由全局导航守卫beforeEach里，每访问一个路由时就判断一下，如果要访问的路由和上一页路由相同，就标识str为后退，不相同就标识str为前进，并同步路由记录到arr。
路由出口的transition name属性取值str标识，并定义好相应的过渡样式，这样就大概完成了。

二、区分前进后退

1、vuex部分

@/store/index.js
handleRouteChange 方法是在beforeEach导航守卫里使用。

{
  state: {
    directionName: '', // 页面切换方向：slide-left左滑前进，slide-right右滑后退
    routeStack: [], // 存储路由栈
  },

  getters: {
    directionName (state) {
      return state.directionName || ''
    },
    routeStack (state) {
      return state.routeStack || []
    },
  },

  mutations: {
    PUSH_ROUTE_STACK (state, route) {
      state.routeStack.push(JSON.parse(JSON.stringify(route)))
    },
    POP_ROUTE_STACK (state) {
      state.routeStack.pop()
    },
    SET_DIRECRTION_NAME (state, direction) {
      state.directionName = direction
    }
  },

  actions: {
    // 记录页面前进/后退
    handleRouteChange ({ getters, commit }, payload) {
      const { to, from } = payload
      let len = getters.routeStack.length
      if (len === 0) {
        const homePath = '/home' // 项目首页的路由，换成你自己的
        if (to.path === homePath) {
          // 直接打开首页
          commit('PUSH_ROUTE_STACK', to)
        } else {
          // 直接打开非首页
          commit('PUSH_ROUTE_STACK', { path: homePath })
          commit('PUSH_ROUTE_STACK', to)
        }
      } else if (len === 1) {
        // 先打开首页，再打开其他路由
        commit('SET_DIRECRTION_NAME', 'slide-left')
        commit('PUSH_ROUTE_STACK', to)
      } else {
        let lastBeforeRoute = getters.routeStack[len - 2]
        if (lastBeforeRoute.path === to.path) {
          // 打开上一页路由，后退
          commit('POP_ROUTE_STACK')
          commit('SET_DIRECRTION_NAME', 'slide-right')
        } else {
          // 前进
          commit('PUSH_ROUTE_STACK', to)
          commit('SET_DIRECRTION_NAME', 'slide-left')
        }
      }
    }
  }
}

2、路由配置部分

@/router/index.js
上述vuex部分的 homePath 就是这里配置的 /home 。

routes: [
	{
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: () => import(/* webpackChunkName: "home" */ '@/views/home/index.vue'),
      meta: {
        title: '首页',
      }
    },
]

3、全局导航守卫

调用vuex里定义的 handleRouteChange 方法。

import router from '@/router'
import store from '@/store'

router.beforeEach((to, from, next) => {
  store.dispatch('handleRouteChange', { to, from })
  next()
})

三、过渡动画

1、组件封装

这里我把transition过渡部分封装成了组件PageSlide：

<template>
  <transition :name="directionName">
    <slot></slot>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'PageSlide',
  computed: {
    ...mapGetters(['directionName'])
  },
}
</script>

<style lang="less" scoped>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  position: absolute;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0);

}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0);
}
</style>

2、组件引用

在App.vue里的路由出口上包装一下。

<template>
  <div id="app">
    <PageSlide>
      <router-view />
    </PageSlide>
  </div>
</template>

<script>
import PageSlidefrom '@/components/PageSlide'

export default {
  name: 'App',
  components: {
    PageSlide,
  },
}
</script>

v2

一、回顾与思考

v1版本通过vuex存储页面历史和页面方向，通过beforeEach全局路由导航守卫来获取要跳转的路由信息，对比判断页面方向。

后来想了一下：

为什么使用vuex存储而不用普通js模块存储，是因为vuex里的页面方向数据的变化能触发响应式，使切换动画能根据页面方向即时变换；
而vuex里这块数据就只有页面切换模块用到，是否可以移入封装的页面切换组件 PageSlide 里；
如果移进去那组件内的 handlePageDirection 方法就没办法在路由导航守卫 beforeEach 里调用了，而调用的目的就只是传递下一页的路由信息；
那是否有其他方式来获取下一页路由，有，watch监听 $route 即可，因为路由出口是要被包裹在这个组件里的。

那么改造后一个组件就实现了所有代码逻辑。

二、其他优化点

1、精简路由栈数据

v1里路由栈routeStack数据存储的是所有路由route的完整数据，而当前功能其实只用到path这一个数据而已，那就只存储path，同时也减去了 JSON.parse(JSON.stringify(route)) 的深克隆操作。

pushRouteStack (route) {
  const { path } = route
  this.routeStack.push({ path })
},

2、支持页面刷新

v1里存储vuex在页面刷新后路由栈routeStack数据会初始化清空，所以这次把routeStack数据同步存储在sessionStorage里，页面刷新后从sessionStorage读取出来。

created () {
  this.routeStack = this.getSessionRouteStack()
},

 pushRouteStack (route) {
  const { path } = route
  this.routeStack.push({ path })
  this.setSessionRouteStack()
},
popRouteStack () {
  this.routeStack.pop()
  this.setSessionRouteStack()
},

3、兼容vue3.0

大概瞄了一眼，vue3.0不兼容的部分应该就只有transition类名吧：
class-enter 修改为 class-enter-from；
class-leave 修改为 class-leave-from。

那就全写上：

.slide-left-enter,
.slide-left-enter-from,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(@distanceX, 0);

}
.slide-left-leave-active,
.slide-right-enter,
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-@distanceX, 0);
}

更多vue3.0升级可以参考：项目升级vue3.0经验总结

4、重构页面方向判断逻辑

这一版对页面前进后退的判断逻辑进行了重构，考虑了更多细节场景的处理，路由栈初始时默认存放首页路由：

handleRouteChange (to) {
  const len = this.routeStack.length
  const currentRoute = this.routeStack[len - 1]
  // 判断是否是刷新路由
  if (currentRoute.path !== to.path) {
    if (len === 1) {
      // 初次打开非首页路由，前进
      this.setPageForward(to)
    } else {
      // len > 1
      const lastRoute = this.routeStack[len - 2]
      if (lastRoute.path === to.path) {
        // 打开上一页路由，后退
        this.setPageBack(currentRoute)
      } else {
        if (to.path === this.indexPagePath) {
          // 中途打开首页，后退，重置路由栈
          this.setDirectionName('slide-right')
          this.resetRouteStack()
        } else {
          // 常规情况，前进
          this.setPageForward(to)
        }
      }
    }
  }
},

三、完整代码封装

1、封装后的组件 PageSlide

<template>
  <transition :name="directionName">
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'PageSlide',
  props: {
    // 首页路由path
    indexPagePath: {
      type: String,
      default: '/',
    },
  },
  data () {
    return {
      directionName: '', // 页面切换方向：slide-left左滑前进，slide-right右滑后退,
      routeStack: [], // 存储路由栈
    }
  },
  watch: {
    '$route' (val) {
      this.handleRouteChange(val)
    }
  },
  created () {
    this.routeStack = this.getSessionRouteStack() || [{ path: this.indexPagePath }]
  },
  methods: {
    handleRouteChange (to) {
      const len = this.routeStack.length
      const currentRoute = this.routeStack[len - 1]
      // 判断是否是刷新路由
      if (currentRoute.path !== to.path) {
        if (len === 1) {
          // 初次打开非首页路由，前进
          this.setPageForward(to)
        } else {
          // len > 1
          const lastRoute = this.routeStack[len - 2]
          if (lastRoute.path === to.path) {
            // 打开上一页路由，后退
            this.setPageBack(currentRoute)
          } else {
            if (to.path === this.indexPagePath) {
              // 中途打开首页，后退，重置路由栈
              this.setDirectionName('slide-right')
              this.resetRouteStack()
            } else {
              // 常规情况，前进
              this.setPageForward(to)
            }
          }
        }
      }
    },
    // 前进
    setPageForward (route) {
      this.setDirectionName('slide-left')
      this.pushRouteStack(route)
    },
    // 后退
    setPageBack () {
      this.setDirectionName('slide-right')
      this.popRouteStack()
    },
    // 设置页面方向
    setDirectionName (name) {
      this.directionName = name
    },
    // 重置
    resetRouteStack () {
      this.routeStack = [{ path: this.indexPagePath }]
      this.setSessionRouteStack()
    },
    pushRouteStack (route) {
      const { path } = route
      this.routeStack.push({ path })
      this.setSessionRouteStack()
    },
    popRouteStack () {
      this.routeStack.pop()
      this.setSessionRouteStack()
    },
    setSessionRouteStack () {
      try {
	    sessionStorage.setItem('routeStack', JSON.stringify(this.routeStack))
	  } catch (error) {
	    console.warn('storage is not supported')
	  }
    },
    getSessionRouteStack () {
      const str = sessionStorage.getItem('routeStack')
      if (!str) {
        return null
      }
      let val = []
      try {
        val = JSON.parse(str)
      } catch (error) {
        console.warn('parse routeStack wrong')
      }
      return val
    },
  }
}
</script>

<style lang="less" scoped>
@distanceX: 100%;

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  position: absolute;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(@distanceX, 0);

}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-@distanceX, 0);
}
</style>

2、App.vue 引用

<template>
  <div id="app">
    <PageSlide indexPagePath="/home">
      <router-view />
    </PageSlide>
  </div>
</template>

<script>
import PageSlidefrom '@/components/PageSlide'

export default {
  name: 'App',
  components: {
    PageSlide,
  },
}
</script>

indexPagePath 参数是项目首页路由的path，换成你自己项目的path路径。

四、react实现指引

不管是v1还是v2、vue还是react，核心思想不变，即：
存储路由访问历史数据，获取下一页路由数据，进行对比判断出页面方向。

react版的实现方式上主要需要解决以下问题：

1、过渡动画：可以通过 react-transition-group 实现。
2、获取下一页路由数据：可以通过 react-router 的 withRouter 来实现。

3、监听路由的变化：

配合上述 withRouter ，当 props.location变化时， componentWillReceiveProps 钩子就会执行，可作为监听函数；

import { withRouter } from 'react-router-dom'
class Main extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  componentWillReceiveProps (nextProps) {
  	console.log(nextProps.location)
  }
  render() {
    return (
        <div>demo</div>
    )
  }
}
export default withRouter(Main)

hooks语法就更简单了，useEffect 直接就能响应路由的变化。

const Demo = function (props) {
  useEffect(() => {
    console.log(props.location)
  }, [props.location])
}

剩下的逻辑就和vue大同小异了，自己实现吧。