我已经实现了 VUE js 的页面转换。我手动执行此操作，因为我找不到如何使用 VueS 转换来执行此操作。
（我正在为 vue js 使用 gridsome 框架 - 我添加了一个自定义 App.vue 页面 - 它应该允许 gridsome 的转换像普通的 Vue js 转换一样）
我觉得我所做的事情对于它的用例来说太臃肿了，所以想看看是否有人知道如何使用 vue 转换来实现它。
#1
Users click component (which has a @click - triggering a this.$router.push() to the route)
#2
A div pops over the screen in the color of that component, creating a nice fade to hide the transition
#3
On the new page, another div identical to the transition one, now exits the screen.
我有这个工作供参考，只需点击客户（请尽量不要对我评价太多，它仍在开发中） - https://wtwd.ninjashotgunbear.com/
我的方法：
Index.html
SectionTitle当用户单击其中一个组件时，每个组件都是具有$emit该页面数据的特定 obj（例如要路由到的页面的颜色和名称）-@routeChange="reRoute($event)如下所示：
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" @routeChange="reRoute($event)"/> <<<< COMPONENT that $emits on click
</div>
<!-- fullpage div to slide in and cover up no leave transition -->
<div class="leaveScreen"></div> <<<<< DIV that covers the screen
</Layout>
</template>
这会触发我在 UI 视图上移动 div 并创建过渡效果的方法：
methods:{
reRoute(value){
console.log(value)
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push(value.sectionLink)
}, 700)
}
}
用于 DIV 的 CSS：
.leaveScreen {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
width: 100%;
z-index: 11;
// background color added by the fn reRoute()
transition: all 0.7s;
}
在页面上，我使用安装的钩子从用户视图中删除 div（与我在上面添加它的方式相同，但相反。
mounted(){
let screen = document.querySelector('.fadeOutScreen');
// set timeout works to delay
setTimeout(()=>{
screen.style.cssText='left: 100%;'
},700)
}
如果您知道如何在更简洁的代码中/或通过使用 VUES 转换属性来做到这一点，那么非常欢迎您的帮助。我认为 VUE 会有一个特定的方法来做到这一点，但还没有找到。
在此先感谢-W