vue 路由切换时 有没有什么成熟的方案实现ios平滑过渡

Question

vue 路由切换时 有没有什么成熟的方案实现ios平滑过渡

试过给路由增加一个索引存到sessionStorage里面，以点击过的索引值不变，新增加的路由，索引增加1，同时count+1，这样在页面切换时通过比较索引值的大小，大的向右小的向左，做到左右有规律的过渡
首页->个人中心->绑定账号。 没问题 , 但是从绑定账号页面回到个人中心的时候出问题了 没行通

还有没有什么成熟的方案?

Answer 1

我刚好做了一个app的项目,用到了这个方法.
可以自定义一个 meta的index,在 app.vue,比较当前的index和from的index,给transition添加从slide-right还是slide-left.

app.vue

<template>
  <div id="app">
    <transition :name="transitionName">
        <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > 0) {
        if (to.meta.index < from.meta.index) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
      } else if (to.meta.index === 0 && from.meta.index > 0) {
        this.transitionName = 'slide-right'
      }
    }
  }
}

router

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: resolve => require(['../page/home'], resolve),
      meta: {
        index: 0
      }
    },
    {
      path: '/center',
      name: 'center',
      component: resolve => require(['../page/center'], resolve),
      meta: {
        index: 1
      }
    },
    {
      path: '/account',
      name: 'account',
      component: resolve => require(['../page/account'], resolve),
      meta: {
        index: 2
      }
    }
  ]
})

路由切换动画

.child-view {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.45s ease-out;
  position: absolute;
}

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

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

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

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

Answer 2

你想实现原生的stack的效果是吧，但是vue的路由是基于h5的history实现的，网上的思路：

Answer 3

stack其实并不是一个很好的方案，正常从首页进列表页的话，返回都没问题，但是列表页直接刷新之后再回到首页的时候就会有问题。

所以有这样一个方案就是定义几个数组，把有可能从前到后页面转场顺序都定义出来，然后路由变化的时候，遍历这几个数组，查到这两个路由在数组中的顺序来决定使用哪种动画