如何在Vue中实现路由之间的加载页面转换?

Question

我正在尝试在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基本相同。

Answer 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'
}
}

该链接在页面顶部还有一个视频解释!