按需组件的 Vue 转换模式不起作用

Question

我有一个包含多个页面的 SPA。这些页面是组件，使用 web pack 的代码拆分按需加载。

页面用 <transition mode="out-in"> 标签包裹，但是，顺序转换不适用于初始组件加载。

这是一个重现错误 https://github.com/ByEmke/vue-transition-mode-issue 的 git 回购协议。

[编辑] 我想强调关于过渡模式的问题。它是不起作用的过渡模式。 'out-in' 应该缓和消失的元素并缓和出现的元素，这应该按顺序发生，但是，它是并行发生的（因为没有设置过渡模式）。它不适用于初始组件加载（您可以在 Github 的示例中清楚地看到它在运行时），但在之后切换时它可以正常工作。

这是显示问题的 gif http://recordit.co/mtiNGNUNCp

Answer 1

我认为您在转换节点上缺少 appear 指令

<transition appear>
   <!-- ... -->
</transition>

来自文档 here

编辑：有了更多信息，我认为这是 main.vue

中的过渡 css

<style lang="sass">
    h2 {
        &.ease-enter-active, &.ease-leave-active {
            transition: opacity 1s ease;
        }
        &.ease-enter, &.ease-leave-active {
            opacity: 0;
        }
    }
</style>

试试这个

<style lang="sass">
    .ease-enter-active, .ease-leave-active {
        transition: opacity 1s ease;
    }
    .ease-enter, .ease-leave-active {
        opacity: 0;
    }
</style>

Answer 2

所以现在，我要坚持使用猴子补丁，由亲戚 div 包装我的页面并将页面绝对放置在顶部。

http://recordit.co/KXFrymElAR

P.S。如果页面下方有一些内容，则此补丁将不起作用，因为父级的高度为 0。它适用于我的用例，但当需要 on- 下方的内容时需要进行更多修改需求成分。

按照 github 示例，模板现在是这样的：

<div id="app">
    <div>
        <transition name="ease" mode="out-in" appear>
            <component :is="page"></component>
        </transition>
    </div>

    <button @click="first">First page</button>
    <button @click="second">Second page</button>
</div>

和样式：

div {
    position: relative;
}

h2 {
    position: absolute;
    top: 0;

    &.ease-enter-active, &.ease-leave-active {
        transition: opacity 0.2s ease;
    }
    &.ease-enter, &.ease-leave-active {
        opacity: 0;
    }
}

按需组件的 Vue 转换模式不起作用

Vue transition mode on on-demand components not working

vue.js

vuejs2