Question

我有一个有多页的SPA。页面是组件，并使用Web包的代码拆分按需加载。

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

这是一个git repo，可以重现错误https://github.com/ByEmke/vue-transition-mode-issue。

[编辑] 我想强调关于过渡模式的问题。转换模式不起作用。＆＃39; out-in＆＃39;应该缓和消失的元素并且在出现的元素中缓和，这应该按顺序发生，但是，它并行发生（因为没有过渡模式设置）。它不适用于初始组件加载（您可以在运行时在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.它适用于我的用例，但是当需要下面的内容时需要更多的黑客攻击 - 需求组件。

在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过渡模式不起作用

2 个答案: