Vue transition on router - but transition effects specific html Element

Question

I have a page transition for VUE js that I have implemented. I did this manually because I could not find how to do this using VUES transition.

(I am using gridsome framework for vue js - I have added a custom App.vue page - which should allow transitions of gridsome to act like normal Vue js transitions)

I feel like what I have done is bloated for its use case so wanted to see if anyone knew how to implement this using vue transtions.

#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. 

I have this working here for reference, just click on clients (please try not to judge me to much, its still in development) - https://wtwd.ninjashotgunbear.com/

---

MY METHOD:

Index.html

Each component is a SectionTitle when the user clicks on one of them they $emit the specific obj with the data for that page (such as the color && the name of the page to be routed to) - this is the @routeChange="reRoute($event) seen below:

<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>

This triggers my method that moves the div over the UI view and creates the transition effect:

 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;
  
}

---

The on the page, I use the mounted hook to remove the div from the users view (in the same, but other way around, way that I added it above.

 mounted(){
        let screen = document.querySelector('.fadeOutScreen');
        // set timeout works to delay 
        setTimeout(()=>{
            screen.style.cssText='left: 100%;'
        },700)
        
    }

---

If you know how to do this in a cleaner code / or by using VUES transition property then your help is very welcomed. I figured that VUE would have a specific way of doing this, but have not found it yet.

Thanks in advance - W

Answer 1

If you wrap .leave-screen in a transition element you can do something like this:

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 and .leave-screen-leave-active define the state of the element during transition.

.leave-screen-leave-to is the state the element leaves to (surprisingly) and .leave-screen-enter is the state of the element before it enters.

The styles you set on the element itself are where the transition starts/ends (depending on whether it's entering/leaving).

---

Vue's definitions:

1. v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
2. v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
3. v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
4. v-leave-to: Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.