如何使用页面作为过渡在vue.js中的页面之间进行过渡？

问题描述

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

像主页到大约页面，在过渡的中间，我放了一个带有品牌徽标的页面。

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

谢谢。

解决方法

从技术上讲，这是一个加载屏幕。您可以通过几种方式来实现。首先要做的是创建带有品牌徽标和动画的加载组件。将其导入到根组件中，然后根据您创建的加载变量在模板中使用v-show。如果要对后端进行API调用，则可以使用根组件中使用的任何HTTP客户端库创建一个拦截器。将拦截器放在创建的生命周期方法中，该方法将在拦截请求时设置加载变量。截获响应时，未设置loading变量。如果API调用速度很快或您没有进行任何API调用，那么请在创建的生命周期方法中，将afterEach路由器调用与javascript超时函数一起使用，该javascript超时函数会在设定的ms数后取消加载变量的设置。

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

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

我只是将屏幕的所有高度和宽度固定在一个固定的位置上，等待一段时间后就关闭了

像这样：

在App.vue中：（以获得到页面过渡的良好渐变效果）

Import Project="$(FSharpTargetsPath)" Condition="Exists('$(FSharpTargetsPath)')"

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

vue-transitions vue.js