Vue中transition过渡动画，出现两个页面同时出现的问题解决方法（从左往右，淡入淡出过渡动画）

最新推荐文章于 2024-07-02 21:01:29 发布

Sca_jie

最新推荐文章于 2024-07-02 21:01:29 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签：动画 css3 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42966151/article/details/128384852

版权

vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

如下图，两个页面切换的动画重合了，这不是我所想要的，我想要的是一个动画完成后，在执行另一个动画.

后面看了Vue.js官方文档，发现了解决方法，添加以下参数即可

mode="out-in"

示例

          <!--过渡动画-->
          <transition name="mainfade" mode="out-in">
            <!--嵌套路由-->
             <router-view></router-view>
          </transition>

  /* 过渡动画 */
  .mainfade-enter,
  .mainfade-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }
  /*  */
  .mainfade-enter-active {
    transition: all 0.3s;
  }
  /* 结束 */
  .mainfade-enter-to {
    opacity: 1;
  }
  .mainfade-leave-active {
    transition: all 0.3s;
  }