页面之间的细长交叉淡入淡出过渡答案

【问题标题】：Svelte crossfade transition between pages页面之间的细长交叉淡入淡出过渡
【发布时间】：2021-12-30 12:43:41
【问题描述】：

我正在尝试在 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>

【问题讨论】：

您的密钥在两个页面上是相同的。它应该是元素独有的东西，所以 Svelte 知道哪个是哪个。尝试将“foo.svelte”中的键更改为“foo”而不是“asdf”，看看是否有任何改变。如果它仍然不起作用，请尝试设置您传递给交叉淡入淡出功能的对象的属性。 svelte 教程中给出了一个示例：svelte.dev/tutorial/deferred-transitions
我看过那个教程，但它不是跨组件的
也不应该相同，因为它们是相同的元素 - 我想在两者之间交叉淡入淡出？
有一篇博客文章建议诀窍是在自己的文件中创建交叉淡入淡出过渡并将其导入到两个页面中。我会尽快尝试这个，我现在不能。您对密钥命名是正确的。它们包含不同的东西，但它们是被替换的相同概念对象，因此它们应该具有相同的键名。 dev.to/buhrmi/svelte-component-transitions-5ie
嗯，我发誓我试过了......将不得不再试一次

标签： svelte sveltekit

【解决方案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({});

【讨论】：