vue 页面进出类似APP的滑动效果

最新推荐文章于 2021-08-24 11:56:40 发布

老黑

最新推荐文章于 2021-08-24 11:56:40 发布

阅读量2.1k

点赞数 1

分类专栏： vue 文章标签： vue vue-router vue路由动画 vue移动端页面切换动画

本文链接：https://blog.csdn.net/qq_33737087/article/details/88293487

版权

本文介绍了如何在Vue项目中为页面切换添加类似原生APP的左右滑动效果，通过vue-router的meta信息判断页面层级，结合transition组件和CSS动画，实现了优雅的进入和返回动画。加入keep-alive的处理，使得动画效果更加流畅。

摘要由CSDN通过智能技术生成

实现vue进入返回实现页面的左右滑动效果

在项目开发中，感觉页面的切换很是生硬，仿照原生APP实现进出页面左右滑动的效果

首先要知道当前操作是进入页面还是返回

在 router 里加一项, 类似这样,添加一个meta，用里面的index来判断页面层级

routes: [
    {
      // 默认的首页
      path: '/',
      name: 'Home',
      component: Home,
      meta: {index: 0}
    },
    {
      // 选择城市
      path: '/city',
      name: 'City',
      component: City,
      meta: {index: 1}
    }
]

在app.vue里面进行判断， index值越小代表层级越大， index小则是返回，index大则是进入

export default {
  name: 'App',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route (to, from) {
      console.log(to.meta.index, from.meta.index)
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left&