Vue中如何实现路由之间的加载页面过渡？答案

【问题标题】：How to implement loading page transition between routes in Vue?Vue中如何实现路由之间的加载页面过渡？
【发布时间】：2021-10-19 10:58:39
【问题描述】：

我正在尝试在 Vue 中实现路由之间的加载动画。这是原来的过渡：https://codepen.io/v1rus96-the-scripter/pen/qBmGKMg

$('.btn_nav').click(function() {
  // animate content
  $('.page__style').addClass('animate_content');
  $('.page__description').fadeOut(100).delay(2800).fadeIn();

  setTimeout(function() {
    $('.page__style').removeClass('animate_content');
  }, 3200);

  //remove fadeIn class after 1500ms
  setTimeout(function() {
    $('.page__style').removeClass('fadeIn');
  }, 1500);

});

// on click show page after 1500ms
$('.home_link').click(function() {
  setTimeout(function() {
    $('.home').addClass('fadeIn');
  }, 1500);
});

$('.projects_link').click(function() {
  setTimeout(function() {
    $('.projects').addClass('fadeIn');
  }, 1500);
});

$('.skills_link').click(function() {
  setTimeout(function() {
    $('.skills').addClass('fadeIn');
  }, 1500);
});

$('.about_link').click(function() {
  setTimeout(function() {
    $('.about').addClass('fadeIn');
  }, 1500);
});

$('.contact_link').click(function() {
  setTimeout(function() {
    $('.contact').addClass('fadeIn');
  }, 1500);
});

*,
:before,
:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.hide {
  display: none;
}

.page__style {
  background: #6d326d;
  font-family: OpenSans-Regular, sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: auto auto;
  overflow: hidden;
}

.page__style .page__description {
  color: #fff;
  font-weight: 300;
  text-align: center;
}

.page__style h1 {
  font-weight: 300;
  margin-top: 200px;
  margin-bottom: 30px;
}

.page__style .btn_nav {
  background: #002a32;
  border-radius: 30px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding: 17px 30px;
  width: 146px;
}

.page__style .btn_nav:focus,
.page__style .btn_nav:active {
  outline: none;
}

.page__style a {
  text-decoration: none;
  color: #fff;
}

.page__style a:hover {
  text-decoration: underline;
}

.animate_content {
  animation: animate 3s ease;
}

.fadeIn {
  z-index: 10;
}


/*  home
-----------------------------------*/

.home {
  background: #5da9e9;
}


/*  Projects
-----------------------------------*/

.projects {
  background: #bd5de9;
}


/*  Skills
-----------------------------------*/

.skills {
  background: #5de974;
}


/*  About
-----------------------------------*/

.about {
  background: #fb9b33;
}


/*  Contact
-----------------------------------*/

.contact {
  background: #c9cdc0;
}


/*****************************************************************
~ Mobile media-queries (max-width: 767px)
******************************************************************/

@media only screen and (max-width: 767px) {
  .page__description h1 {
    margin-top: 100px;
  }
}

@-moz-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}

@-o-keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes animate {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--
        //  projects
        ///////////////////////////////////-->
<div class="page__style projects">
  <div class="page__description">
    <div id="projects">

      <h1>Projects</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
        //  skills
        ///////////////////////////////////-->
<div class="page__style skills">
  <div class="page__description">
    <div id="skills">
      <h1>Skills</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>

<!--
        //  about
        ///////////////////////////////////-->
<div class="page__style about">
  <div class="page__description">
    <div id="about">
      <h1>About</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
        //  contact
        ///////////////////////////////////-->
<div class="page__style contact">
  <div class="page__description">
    <div id="contact">
      <h1>Contact</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>

    </div>
  </div>
</div>
<!--
        //  home
        ///////////////////////////////////-->
<div class="page__style home">
  <div class="page__description">
    <div id="home">

      <div class="box"></div>

      <h1>Home</h1>

      <button class="btn_nav projects_link">Projects</button>
      <button class="btn_nav skills_link">Skills</button>
      <button class="btn_nav home_link">Home</button>
      <button class="btn_nav about_link">About</button>
      <button class="btn_nav contact_link">Contact</button>

      <p>Thanks <a href="https://codyhouse.co/gem/animated-page-transition/" target="_blank">codyhouse.co</a></p>
    </div>
  </div>
</div>

如何在 Vue 中实现这种转换？我有几条路线，点击哪个应该播放过渡并显示我正在过渡的路线的内容。与上面的 CodePen 基本相同。

【问题讨论】：

标签： javascript vue.js transition vuejs3

【解决方案1】：

https://router.vuejs.org/guide/advanced/transitions.html#per-route-transition

Vue 有一种特殊的方法：

第 1 步：将路由器包裹在 transition 标记中

<!-- use a dynamic transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>


Step 2: Implement watcher logic on the route
// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

该链接在页面顶部还有视频说明！

【讨论】：