SvelteKit中能否实现路由切换时页面过渡动画重叠效果？

默认从设置了out:离场过渡的SvelteKit路由A，导航到设置了in:入场过渡的路由B时，框架会等A页离场动画完全结束才挂载B页DOM，两个页面的元素无法重叠显示。

默认串行逻辑的本质是SvelteKit会等待旧页所有局部离场过渡完成后，才销毁旧页、挂载新页，要实现重叠只需要打破这个串行时序，配合布局调整即可：

1. 给过渡添加global修饰符 #

Svelte的过渡默认是局部生效的，父组件销毁时局部过渡会被立刻截断，加|global修饰符后，过渡不会被父组件的卸载逻辑阻塞，旧页DOM会保留到过渡结束，新页DOM也会在导航触发时立刻挂载。
修改路由A代码：

<!-- src/routes/route-a.svelte -->
<script>
    import { fly } from "svelte/transition";
</script>

<header out:fly|global={{ y: 100, duration: 300 }}>
<!-- 页面其余内容 -->

修改路由B代码：

<!-- src/routes/route-b.svelte -->
<header in:fly|global={{ y: 100, duration: 300 }}>
<!-- 页面其余内容 -->

2. 调整根布局支持重叠定位 #

如果不调整布局，新旧页面会按普通文档流上下排列，就算同时渲染也不会重叠，需要修改根布局文件src/routes/+layout.svelte，给页面容器添加定位规则：

<!-- src/routes/+layout.svelte -->
<div class="app-wrapper" style="position: relative; min-height: 100vh;">
    <div style="position: absolute; inset: 0; width: 100%;">
        <slot />
    </div>
</div>

<style>
    :global(body) {
        overflow-x: hidden;
    }
</style>

效果调优（可选） #

• 两个页面的过渡尽量保持相同的duration参数，动画节奏更统一
• 如果要实现旧页滑出、新页滑入的无缝衔接，可以给新页入场动画加和旧页离场一致的缓动函数
• 过渡执行期间可以临时锁定页面滚动，避免滚动条跳动

内容的提问来源于stack exchange，提问作者Valentin