问题描述
我已经实现了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>
这会触发我的方法,该方法将div在UI视图上移动并创建过渡效果:
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)
}
}
CSS FOR DIV:
.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 transition属性来执行此操作,我们将非常欢迎您的帮助。我认为VUE可以使用一种特定的方法来执行此操作,但尚未找到它。
预先感谢- W
解决方法
如果将.leave-screen
包裹在transition
元素中,则可以执行以下操作:
new Vue({
el: "#app",data: {
leaveScreen: false
}
})
body {
margin: 0;
}
.click-me {
cursor: pointer;
font-size: 30px;
}
.leave-screen {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
background-color: rgb(0,0);
}
.leave-screen-enter-active,.leave-screen-leave-active {
background-color: rgba(0,1);
transform: translateX(0);
transition: all 1s ease-in-out;
}
.leave-screen-leave-to,.leave-screen-enter {
background-color: rgba(0,0);
transform: translateX(-100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div @click="leaveScreen = true" class="click-me">
Click Me
</div>
<transition name="leave-screen">
<div v-if="leaveScreen" class="leave-screen" @click="leaveScreen = false"></div>
</transition>
</div>
.leave-screen-enter-active
和.leave-screen-leave-active
定义了过渡期间元素的状态。
.leave-screen-leave-to
是元素离开的状态(令人惊讶地),.leave-screen-enter
是元素进入之前的状态。
您在元素本身上设置的样式是过渡开始/结束的位置(取决于过渡是进入还是离开)。
-
v-enter
:Enter的开始状态。在插入元素之前添加,在插入元素之后删除一帧。 -
v-enter-active
:用于输入的活动状态。在整个进入阶段应用。在插入元素之前添加,在过渡/动画结束时删除。此类可用于定义进入过渡的持续时间,延迟和缓和曲线。 -
v-leave-active
:请假的活动状态。在整个离开阶段应用。触发离开过渡时立即添加,当过渡/动画结束时将其移除。此类可用于定义离开过渡的持续时间,延迟和缓和曲线。 -
v-leave-to
:仅在2.1.8+版本中可用。休假的结束状态。触发离开过渡(同时删除v-leave)后添加一帧,在过渡/动画完成后被移除。