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

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);
}

image.png

阅读 3.6k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题