Vue 中的页面幻灯片转换?

问题描述

我正在使用 Vue.js 构建一个应用程序，我想为它提供更像本机的视图.如何添加页面幻灯片过渡?

I'm building an app with Vue.js and I'd like to give more native-like view to it. How can I add page slide transition?

我当前的代码:

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

我希望它看起来像:

点击此处

使用@Ifaruki 的代码:

点击此处

推荐答案

在您展示的示例中，有两种转换:向前、向后.因此，您必须找到一种根据单击的链接更改过渡的方法.你可以使用 vuex 商店.

In the example you show there are two transitions: Forward, backward. So you will have to find a way to change the transition depending on the link you click on. You can use vuex store for that.

一旦 vuex 安装程序和配置完成，您可以执行以下操作:

Once vuex installer and configured you can do something like below:

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

App.vue 模板

Template of 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");
    }
  }

链接上一个(更改过渡)

模板

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

方法

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

这篇关于Vue 中的页面幻灯片转换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！