页面之间的 Svelte 交叉淡入淡出过渡

Question

我正在尝试在 sveltekit 中的两个页面之间进行转换，但这似乎不起作用，我该怎么做？

<!-- src/routes/asdf.svelte -->
<script>
  import { crossfade } from 'svelte/transition'
  const [send, receive] = crossfade({ })
</script>

<a href="/foo" in:receive={{ key: 'asdf' }} out:send={{ key: 'asdf' }}>Go to foo</a>

<!-- src/routes/foo.svelte -->
<script>
  import { crossfade } from 'svelte/transition'
  const [send, receive] = crossfade({})
</script>

<a href="/asdf" in:receive={{ key: 'asdf' }} out:send={{ key: 'asdf' }} style="background: crimson">Go to asdf</a>

Answer 1

您需要在每个组件/页面中导入相同的淡入淡出参考

https://stackblitz.com/edit/sveltekit-sphygf?file=src/routes/index.svelte

index.svelte

<script>
  import {crossfade} from './crossfade'
  const [send, receive] = crossfade
</script>

<a out:send="{{key: 'a'}}" in:receive="{{key: 'a'}}"   style="border: 1px solid crimson; padding: 20px; margin-top: 20px; display: block" href="/foo">Go to foo</a>

foo.svelte

<script>
  import {crossfade} from './crossfade'
  const [send, receive] = crossfade
</script>

<a out:send="{{key: 'a'}}" in:receive="{{key: 'a'}}"  style="border: 10px solid crimson; padding: 60px; margin-top: 20px; display: block" href="/">Go to /</a>

crossfade.ts

import { crossfade as svelteCrossfade } from 'svelte/transition';

export const crossfade = svelteCrossfade({});

页面之间的 Svelte 交叉淡入淡出过渡

Svelte crossfade transition between pages

svelte

sveltekit