Vue在路由器上进入过渡

Question

我正在跟踪vue文档中的这张图片

我的html

Edit

和CSS

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

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

我创建的demo repository仅包含两个组成部分，并复制了步骤：

• git clone https://github.com/BorysTyminski/vue-transition-issue.git
• cd vue-transition-issue
• npm安装
• npm run dev

和演示代码sanbox： 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。