javascript - Vue.js中使用动态路由匹配时如何实现 "in-out mode"转场效果？

Question

是否可以通过Vue.js的动态路由匹配让转场效果以“in-out模式”运行？ 如果可能的话，我想有一位教授。
当我遇到这个问题时，我能够找到非常有用的问题和答案。

Vue.js 2.0 transition on dynamic route not firing

<transition name="fade" mode="out-in">
  <div class="page-contents" :key="$route.params.id">
    This is my chapter component. Page: {{parseInt($route.params.id)}}
  </div>
</transition>

如答案所示，我们能够通过指定过渡目标的键成功触发过渡效果。
但是，我希望能够使用 mode = "in-out" 而不是 mode = "out-in" 来实现。

希望能像官方指南那样叠加Vue组件。

Vue.js Transition Modes

Simultaneous entering and leaving transitions aren’t always desirable though, so Vue offers some alternative transition modes:
in-out: New element transitions in first, then when complete, the current element transitions out.
out-in: Current element transitions out first, then when complete, the new element transitions in.

难道不能同时在屏幕上同时显示一个Vue组件(实例)吗？ 我们正在等待您的答复。

Answer 1

您绝对可以将 in-out 与 router-view 一起使用，这是您添加的问题的修改后的 fiddle :https://jsfiddle.net/dLnz4rbL/3/

我已使用以下 CSS 将过渡更改为 slide-fade:

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(500px);
  opacity: 0;
}