How to transition between pages in vue.js with a page as transition?

Question

I just want to know how to transition between pages in vue.js with a third page.

like home page to about page and in the middle of the transition I put a page with the logo of the brand.

Like they are doing here: https://www.details.co.jp

Thanks.

Answer 1

I found an other technique much easier.

I just did a component that has the all height and width of the screen at a position fixed that I dismiss after waiting some time

like this:

in App.vue: (to get a nice fade transition to the page transition)

    <template>
      <div id="app">
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
      </div>
    </template>


<style lang="css">
    .fade-enter, .fade-leave-to{
    transition: translateX(3em);
        opacity: 0;
      }
      .fade-enter-active, .fade-leave-active{
        transition: all .3s ease;
      }
</style>

in Home.vue:

<template>
  <div class="home">
    <Transition :name="'- Brand Name -'" v-if="display"/>
    <div>
       home things
    </div>
  </div>
</template>

<script>
import Transition from "@/components/Transition.vue";
export default {
  name: "About",
  components: {
    Transition
  },
data() {
    return {
      display: true,
    
    };
  },
mounted(){
        setTimeout(() => {
       this.display= false
      }, 3500);
    }
};
</script>