是可能有重叠的页面过渡在苗条?

Question

假设我在SvelteKit路由中的一个元素上有一个out:过渡"另一个in:转换在路线的其他元素上。当从A页导航到B页时，A页的过渡必须在B页的元素显示之前完成。

是否有一种方法可以让页面a和B的元素在过渡期间重叠?

一直编辑页面<编辑>

<script>
import { fly } from "svelte/transition";
</script>
<header out:fly={{ y: 100 }}>
...

<编辑>页B

...
<header in:fly={{ y: 100 }}>
...

<编辑>文件结构

📦 project
└ 📂 src
└ 📂 routes 
├ 📜 route-a.svelte
└ 📜 route-b.svelte

Answer 1

正如我在SvelteKit 3.48.0 + SvelteKit 1.0.0-next中看到的那样。350，问题不是&; A的过渡必须在页面B的元素显示之前完成&;，因为SvelteKit开始&;page A&;"页"页"加载。在我下面的例子中，如果你给src/routes/b.js端点添加(取消注释)延迟，你就可以看到它。

问题是与飞行过渡和CSS - "Page "占用一个空间，直到"第a页";转换完成。您可以通过此解决方法(在下面的示例中使用的方法)或使用另一个转换(例如slide)来解决此问题。

飞行过渡重叠的工作示例

src/线路/__layout.svelte:

<nav>
<a href='/a'>Page A</a> | <a href='/b'>Page B</a>
</nav>
<div>
<slot/>
</div>
<style>
div {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
div>:global(*) {
grid-row: 1;
grid-column: 1;
}
</style>

src/线路/a.svelte:

<script>
import { fly } from 'svelte/transition'
</script>
<header out:fly={{ y: 100, duration: 2000 }}>
aaaaaaa
</header>
<style>
header {
height: 200px;
background: #eee;
}
</style>

src/线路/b.svelte:

<script>
import { fly } from 'svelte/transition'
export let text
</script>
<header in:fly={{ y: 100, duration: 2000 }}>
{text}
</header>
<style>
header {
height: 200px;
background: #eee;
}
</style>

src/线路/研究:

import { setTimeout } from 'timers/promises'
export async function get() {
// await setTimeout(1000)
return {
body: {
text: 'bbbbbbbbb'
}
}
}