如何在 vue.js 中以一个页面作为过渡在页面之间进行过渡？

Question

我只想知道如何在 vue.js 中的页面与第三页之间进行转换。

喜欢主页到关于页面，在过渡的中间我放了一个带有品牌标志的页面。

就像他们在这里做的那样：https://www.details.co.jp

谢谢。

Answer 1

从技术上讲，这是一个加载屏幕。您可以通过几种方式做到这一点。首先要做的是使用您的品牌徽标和动画创建加载组件。在根组件中导入它，并根据您创建的加载变量在模板中使用 v-show。如果您正在对 back-end 进行 API 调用，那么您可以使用您在根组件中使用的任何 http 客户端库创建一个拦截器。将拦截器放在创建的生命周期方法中，当它拦截请求时，会设置加载变量。当它拦截响应时，加载变量未设置。如果 API 调用很快或者您没有进行任何 API 调用，那么在创建的生命周期方法中，使用 afterEach 路由器调用和取消加载的 javascript 超时函数在设定的毫秒数后可变。

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

Answer 2

我发现另一种方法更简单。

我刚刚做了一个组件，它的屏幕高度和宽度固定在一个固定的位置，等待一段时间后我将其关闭

像这样：

在 App.vue 中：（获得到页面过渡的漂亮淡入淡出过渡）

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

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

如何在 vue.js 中以一个页面作为过渡在页面之间进行过渡？

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

vue.js

vue-router

transition

vue-transitions