vue 页面过度动画，有闪白，请问怎么解决

Question

1，模仿微信，每个页面切换的时候会有切换的动画

1. 问题：切换的时候中间会有白色的，请问有什么方法呢？

html

    <transition :name="transitionName">
 <keep-alive>
   <router-view v-if="$route.meta.keepAlive && isRouterAlive" class="Router"></router-view>
 </keep-alive>
    </transition>
    <transition :name="transitionName">
 <router-view v-if="!$route.meta.keepAlive && isRouterAlive" class="Router"></router-view>
    </transition>

使用watch 监听

  watch: {
    // 使用watch 监听$router的变化
    $route (to, from) {
      // 如果to索引大于from索引,判断为前进状态,反之则为后退状态 
      if (to.meta.index < from.meta.index) {
        // 设置动画名称
        this.transitionName = 'slide-left';
        console.log('1111===>', this.transitionName, to.meta.index, from.meta.index);
      } else if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-right';
        console.log('22222===>', this.transitionName, to.meta.index, from.meta.index);
      } else {
        this.transitionName = ''
      }
    }
  },

CSS动画

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  // position: absolute; //这里的定位使用relative可以解决切换时页面残影
  position: relative; //这里的定位使用relative可以解决切换时页面残影
}
.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);
}

Answer 1

请问你的项目在ios真机上这种转场动画效果如何呀？我的在安卓上还可以，但是在ios效果不尽人意