我正在使用 Vue.js 构建一个应用程序，我想为其提供更多类似本机的视图。如何添加页面幻灯片切换？

我当前的代码：

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>
...
.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

我希望它看起来像：

点击这里 https://i.stack.imgur.com/CfEGw.gif

使用@Ifaruki的代码：

点击这里 https://i.stack.imgur.com/xN1Xt.gif

在您显示的示例中，有两种转换：向前、向后。因此，您必须找到一种方法来根据您单击的链接来更改转换。你可以使用 vuex store 来实现。

一旦 vuex 安装程序并配置好，你可以执行如下操作：

检查codesandbox中的实时示例：https://codesandbox.io/s/vuejs-transition-slide-in-out-yzc05 https://codesandbox.io/s/vuejs-transition-slide-in-out-yzc05

SCSS：设计您的过渡（App.vue 中的 P.ex）

$duration: 0.5s;
.transition {
  overflow: hidden;
}
.router-view,
.router-view-back {
  &-enter-active,
  &-leave-active {
    position: fixed;
    width: 100%;
    background: white;
    min-height: 100vh;
    top: 0;
  }
}
// router view
.router-view-enter-active {
  transition: transform $duration ease-in-out;
  z-index: 2;
  transform: translateX(100%);
}
.router-view-enter-to {
  z-index: 2;
  transform: translateX(0%);
}
.router-view-leave-active {
  z-index: -1;
}
.router-view-leave-to {
  z-index: -1;
}
// router view back

.router-view-back-leave-active {
  transition: transform $duration ease-in-out;
  z-index: 2;
  transform: translateX(0%);
}
.router-view-back-leave-to {
  z-index: 2;
  transform: translateX(100%);
}

App.vue的模板

<template>
  <div id="app">
    <transition
      :name="$store.state.pageTransition.name"
      :mode="$store.state.pageTransition.mode"
      v-on:after-enter="afterEnter"
      v-on:after-leave="afterLeave"
    >
      <router-view class="transition"/>
    </transition>
  </div>
</template>

App.vue 的方法

methods: {
    afterEnter: () => {
      window.scrollTo(0, 0);
    },
    afterLeave: () => {
      Store.commit("setPageTransition", "default");
    }
  }

链接上一个（更改过渡）

Template

 <button @click="goBack()">Previous page</button>

Method

goBack() {
      this.$store.commit("setPageTransition", "back");
      this.$router.push({
        name: "home"
      });
}