幻灯片反向转换，Vue Js

Question

我正在使用 Vue.JS 开发单页应用程序/移动应用程序。我想要换页时的幻灯片效果，可以这样：

transition name="slide"
 router-view transition
transition

但是当用户返回页面时，我想要幻灯片的反向效果。换句话说，当用户打开一个新页面时，页面会从右边来，但是当他们返回时，页面会从左边来。

Vue 路由器有一个插件，叫vue-router-transition，但是不起作用。它已经过时了，它只适用于非常旧版本的 Vue。

还有一个tutorial on dynamic transitions，但只适用于父路由，例如：example.com/rota1/rota2/rota3，这不是我的情况。

我想到了before.each.router中的如下逻辑，根据用户是否点击返回按钮来设置转换类（slide-left或slide-right）。

问题是我不知道如何在代码中应用这个逻辑。我必须将main.js 中的变量值传递给app.vue，但我不知道该怎么做。

Answer 1

不久前，我在vue-router 中使用了meta 对象并添加了“假”深度，因为我没有任何子对象。如果您使用儿童，请使用以下示例：https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js

export default () => {
  return [{
      meta: {
        depth: 0
      },
      path: '/home',
      component: Home
    },
    {
      meta: {
        depth: 1
      },
      path: '/about',
      component: About
    }]
}

现在您可以像这样在App.vue 中自行检查。

watch: {
  $route(to, from) {
    const toDepth = to.meta.depth || 0;
    const fromDepth = from.meta.depth || 0;

    this.transitionName = toDepth >= fromDepth ? 'slide-left' : 'slide-right';
  }
}

Answer 2

我看到了 2 个选项：

1. 在 Vuex "transitionBack" 中存储一个变量并将其设置为 true。将 router-link 更改为 @click 方法。在方法中，首先保存变量，然后导航到链接。在您的 beforeRouteUpdate(to, from, next) 方法中检查该变量。
2. 在您的 beforeRouteUpdate(to, from, next) 方法中实现一些逻辑，以检查链接的名称（例如，如果您只能从某个页面“返回”，则保留所有这些类型页面的列表）

Answer 3

希望这会有所帮助：

new Vue({
  el: '#demo',
  data: {
    slideTransition: 'slide-left',
    showChild: false,
  },
  watch: {
    showChild(value) {
      if (value) {
        this.setSlideTransition('slide-right');
      } else {
        this.setSlideTransition('slide-left');
      }
    },
  },
  methods: {
    setSlideTransition(slideDirection) {
      // Note: 300ms mentioned below is matching with css transition timing
      setTimeout(() => { this.slideTransition = slideDirection; }, 300);
    },
  },
});

body {
  margin: 0;
  color: #bdbdbd;
  background-color: #161616;
  font-family: Helvetica neue, roboto;
}

.container {
  width: 500px;
  background: #161616;
}

main {
  width: 60%;
  height: 300px;
  background-color: #333;
}

aside {
  width: 40%;
  background-color: #555;
}

.container, main, .parent, .child, .content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: deepskyblue;
}

.child {
  background-color: deeppink;
}

.container, main, aside {
  position: relative;
  height: 199px;
}

.pin {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.pt-50 {
  padding-top: 50px;
}

/* transitions */
.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

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

.slide-left-leave-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-right-enter-active {
  transition: 0.3s;
}

.slide-left-enter {
  transform: translate(100%, 0);
}

.slide-left-leave-to {
  transform: translate(-100%, 0);
}

.slide-right-enter {
  transform: translate(-100%, 0);
}

.slide-right-leave-to {
  transform: translate(100%, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="demo" class="container">
  <aside>
    <transition name="fade">
      <div class="pin parent" v-if="!showChild">
        <div>
          <h1>Parent</h1>
          <a href="#" @click="showChild = true">Go To Child</a>
        </div>
      </div>
    </transition>
    <transition :name="slideTransition">
      <div class="pin child" v-if="showChild">
        <div>
          <h1>Child</h1>
          <a href="#" @click="showChild = false">Go To Parent</a>
        </div>
      </div>
    </transition>        
  </aside>
  <main>
   <div>
    <h1>Main</h1>
    <transition name="fade">
      <div v-if="showChild" class="pin content pt-50" key="child">
        <h4>Child Content here</h4>
      </div>
      <div v-else="" class="pin content pt-50" key="parent">
        <h4>Parent Content here</h4>
      </div>
    </transition>
   </div>
  </main>
</div>