transition过渡动画闪烁同时出现两个页面

leojoe1992

已于 2022-04-14 11:40:11 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js css3

于 2022-04-14 11:39:22 首次发布

本文链接：https://blog.youkuaiyun.com/leojoe1992/article/details/119041106

本文介绍如何在Vue中使用animate.css进行页面跳转时避免视觉错位，通过监听`$route`并临时隐藏再显示`router-view`，确保动画平滑过渡，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用animate.css中跳转时候会同时显示两个不同页面导致错位

例如：我从工作台跳转到邮件模块
在这里插入图片描述

中间有一个过度动画

<transition
        mode="out-in"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
          <router-view
            style="animation-duration: 200ms"
          ></router-view>
  </transition>

路由跳转的中间会出现这种情况:
在这里插入图片描述
图中会多出一块红色区域的空白，视觉体验很差

解决方案：

其实只要在路由跳转的时候监听$route 让页面先v-if=“false” ，然后用定时器把页面放出来就可以完美解决，记住定时器的时间一定要和动画持续时间保持一致，不能小于动画时间

 $route(newValue, oldValue) {
      this.show_nav = false;
      setTimeout(() => {
        this.show_nav = true;
      }, 200);
     }

<transition
        mode="out-in"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
          <router-view
            style="animation-duration: 200ms"
            v-if="show_nav"
          ></router-view>
</transition>