Vue 在路由器上进入过渡

Question

我正在关注 vue 文档中的这张图片

我的html

<transition name="fade">
  <router-view/>
</transition>

和css

.fade-enter-active, .fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}

它正确淡出但立即弹出而不是淡入。为什么？

我只用 2 个组件创建了 demo repository，重现步骤：

git 克隆 https://github.com/BorysTyminski/vue-transition-issue.git
cd vue-transition-issue
npm 安装
npm 运行开发

和演示codesanbox： https://codesandbox.io/embed/vue-template-4e4oy

Answer 1

问题是两个你的div同时转换。
这意味着它们同时出现在 DOM 中。
这意味着第二个，就像任何好的 ol'<div>，将呈现在第一个下面。
下方如 "...页面下方".
除非用top:0绝对定位，当然

所以我猜你失踪了...

#app {
  position: relative;
  > div + div {
    position: absolute;
    top: 0;
  }
}

See it.

Vue 在路由器上进入过渡

Vue enter transition on router

transition

vue.js

vuejs2