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>

Answer 2

That's technically a loading screen. You can do this in a couple ways. The first thing to do is create the loading component with your brand logo and animation. Import this in the root component and use v-show in the template based on a loading variable you create. If you are making API calls to a back-end, then you can create an interceptor with whichever http client library you're using in the root component. Place the interceptor in the created lifecycle method that when it intercepts requests, the loading variable is set. When it intercepts responses, the loading variable is unset. If the API calls are fast or you are not making any API calls, then instead, in the created lifecycle method, use the afterEach router call with the javascript timeout function that unsets the loading variable after a set number of ms.

Example using axios:

 <template>
  <div class="main-container">
    <div class="loader"> <!-- set high z-index for overlay -->
      <Loading v-show="loading" />
    </div>
    <router-view />
  </div>
</template>

<script>
import Loading from "@/components/loading";
import axios from "axios";

export default {
  data() {
    return {
      // loading variable - default false so timeout unsets it
      loading: false,
    };
  },
  components: {
    // loading component with logo
    Loading,
  },
  created: function() {
    // router call to set minimum loading time
    this.$router.afterEach(() => {
      setTimeout(() => (this.loading = false), 400);
    });
    // when requests are made from this or any child component, set loading
    axios.interceptors.request.use((config) => {
      this.loading = true;
      return config;
    });
    // once a response is received, unset loading
    axios.interceptors.response.use((config) => {
      this.loading = false;
      return config;
    });
  }
};
</script>