CODEWITHSUNDEEP
sveltesveltekit
david_adler
david_adler

Reputation: 11002

Svelte crossfade transition between pages

I'm trying to transition between two pages in sveltekit but this doesn't seem to work, how can I do this?

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

Upvotes: 7

Views: 3475

Answers (1)

david_adler
david_adler

Reputation: 11002

You need to import the same crossfade reference in each component / page

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({});

Upvotes: 8

Related Questions