如何以页面作为过渡在 vue.js 中的页面之间进行过渡？答案

【问题标题】：How to transition between pages in vue.js with a page as transition?如何以页面作为过渡在 vue.js 中的页面之间进行过渡？
【发布时间】：2021-01-19 01:26:06
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： vue.js vue-router transition vue-transitions

【解决方案1】：

我发现另一种技术要容易得多。

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

像这样：

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

【讨论】：

【解决方案2】：

从技术上讲，这是一个加载屏幕。你可以通过几种方式做到这一点。首先要做的是使用您的品牌徽标和动画创建加载组件。在根组件中导入它，并根据您创建的加载变量在模板中使用 v-show。如果您正在对后端进行 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>

【讨论】：