1

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

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

这是一个重现错误https://github.com/ByEmke/vue-transition-mode-issue的 git 存储库。

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

这是一个显示问题的 gif http://recordit.co/mtiNGNNCp

4

2 回答 2

1

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

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

尝试这个

<style lang="sass">
    .ease-enter-active, .ease-leave-active {
        transition: opacity 1s ease;
    }
    .ease-enter, .ease-leave-active {
        opacity: 0;
    }
</style>
于 2016-10-14T17:06:26.640 回答
0

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

http://recordit.co/KXFrymElAR

PS 如果页面下方有一些内容，则此补丁将不起作用，因为父级的高度为 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;
    }
}
于 2016-10-17T07:41:01.810 回答