Page Transitions Not Working with Svelte 5 Runes and SvelteKit Latest

[Mooshieblob1]

Current Behavior

Page transitions are either not occurring or behaving inconsistently despite implementing Svelte's transition directives. Possible layout shifts and conflicts with existing page structure.

Expected Behavior

• Smooth transition between pages
• Fade out of current page content
• Slight fly-in animation for new page content
• Consistent transitions across all route changes

Current Implementation

Here's the current setup spread across three key files:

In src/routes/+layout.svelte, we have the main layout with transition attempts:

<script lang="ts">
  import '../app.css';
  import { fade, fly } from 'svelte/transition';
  import { cubicInOut } from 'svelte/easing';

  let { children } = $props();
  const duration = 200;
</script>

<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
  <div
    class="flex-1"
    in:fly={{ y: 20, duration, delay: duration, easing: cubicInOut }}
    out:fade={{ duration }}
  >
    {@render children()}
  </div>
</div>

We also tried a dedicated PageTransition component:

<script lang="ts">
  import { fly, fade } from 'svelte/transition';
  import { cubicInOut } from 'svelte/easing';
  import { page } from '$app/stores';
  
  const duration = 200;
</script>

{#key $page.url.pathname}
  <div
    in:fly={{ y: 20, duration, delay: duration, easing: cubicInOut }}
    out:fade={{ duration }}
  >
    <slot />
  </div>
{/key}

And our PageWrapper component:

<script lang="ts">
  import Footer from './Footer.svelte';
  export let title: string = '';
</script>

<div class="flex flex-col min-h-full">
  <main class="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8">
    {#if title}
      <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">{title}</h1>
    {/if}
    <slot />
  </main>
  <Footer />
</div>

Environment

• SvelteKit latest
• Svelte 5 with runes
• TailwindCSS
• Cloudflare adapter

Potential Issues

1. Transition placement in component hierarchy might be incorrect
2. Possible conflict between layout transitions and page content
3. SvelteKit's new routing system might require different approach
4. Svelte 5 runes compatibility issues with transitions

Possible Solutions to Investigate

1. Move transitions to a higher level in component tree:

   {#key $page.url.pathname}

   {@render children()}
   {/key}

2. Use SvelteKit's view transitions API:

   import { beforeNavigate, afterNavigate } from '$app/navigation';

3. Investigate Svelte 5 specific transition patterns

Action Items

• Test transitions at different component levels
• Create minimal reproduction case
• Check Svelte 5 documentation for transition changes
• Test with both client-side and server-side navigation
• Investigate if ViewTransitions API would be a better solution

Questions for Investigation

• How do Svelte 5 runes affect traditional transition patterns?
• Is there a recommended approach for SvelteKit transitions with the new router?
• Are there any known issues with transitions in SvelteKit's latest version?
• How to properly handle transitions with nested layouts?

References

• SvelteKit Route Transitions
• Svelte Transitions
• Svelte 5 Documentation