Vue.js 按需组件上的Vue转换模式不工作

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

页面用

标记包装，但是，顺序转换在初始组件加载时不起作用

这是一个重现错误的git回购协议

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

---

这是一个显示问题的gif

我认为您缺少过渡节点上的

出现

指令

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

从文件中

编辑： 有了更多信息，我认为这是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>

氢{
&.轻松进入活动状态，轻松离开活动状态{
过渡：不透明度1s；
}
&.轻松进入，轻松离开活动状态{
不透明度：0；
}
}

试试这个

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

.轻松进入活动状态，.轻松离开活动状态{
过渡：不透明度1s；
}
.轻松进入，.轻松离开活动状态{
不透明度：0；
}

所以现在，我将坚持使用猴子补丁，用一个相对div包装我的页面，并将页面绝对定位在顶部

另外，如果页面下方有一些内容，则此修补程序将不起作用，因为父级的高度为0。它适用于我的用例，但当需要点播组件下面的内容时，需要更多的黑客攻击

下面是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>

---

尝试过，没有帮助编辑-问题仍然存在，查看更新问题的gif，它显示了发生了什么。我希望立即进行顺序转换，这不会发生在最初加载的组件上。谢谢你的尝试：）我在那个gif上得到了403。啊，愚蠢的应用程序，很抱歉，看看更新的URL。我回家后必须看一看，可以下载github示例。不幸的是，我的手机无法进行那样的开发。这把小提琴是否显示了一个工作版本？是的，但这正是我面临的问题，当组件加载到Demand上时它不工作。我想问题在于你的过渡css，我已经更新了我的答案

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;
    }
}