路由器上的 Vue 转换 - 但转换效果特定 html 元素

Question

我已经实现了 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 具有该页面数据的特定对象（例如页面的颜色和名称）路由到) - 这是下面看到的 @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 对于 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 转换来执行此操作属性那么非常欢迎您的帮助。我想 VUE 会有一个特定的方法来做到这一点，但还没有找到它。

提前致谢 - W

Answer 1

如果将 .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, 0);
}

.leave-screen-enter-active,
.leave-screen-leave-active {
  background-color: rgba(0, 0, 0, 1);
  transform: translateX(0);
  transition: all 1s ease-in-out;
}

.leave-screen-leave-to,
.leave-screen-enter {
  background-color: rgba(0, 0, 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 是元素进入之前的状态。

您在元素本身上设置的样式是过渡 starts/ends 的地方（取决于它是否 entering/leaving）。

Vue's definitions:

v-enter：enter的起始状态。在插入元素前添加，在插入元素后删除一帧。
v-enter-active: 进入活动状态。在整个进入阶段应用。在插入元素之前添加，在 transition/animation 完成时删除。此 class 可用于定义进入过渡的持续时间、延迟和缓动曲线。
v-leave-active：休假活跃状态。在整个离开阶段应用。触发离开转换时立即添加，在 transition/animation 完成时删除。此 class 可用于定义离开过渡的持续时间、延迟和缓动曲线。
v-leave-to：仅适用于 2.1.8+ 版本。请假的结束状态。在触发离开过渡后添加一帧（同时删除 v-leave），在 transition/animation 完成时删除。

路由器上的 Vue 转换 - 但转换效果特定 html 元素

Vue transition on router - but transition effects specific html Element

vue.js

gridsome

vue-transitions