svelte transition on page loaded (sveltekit)

9/30/2022, 8:00:11 AM

by Leo Voon

The answer is utilizing afterNavigate from `$app/navigation`

<script>
    import { afterNavigate } from '$app/navigation';
    import { fade } from 'svelte/transition';

    // hide by default
    let visible = false;

    let duration;

    afterNavigate(({ from }) => {
        // only animate if the navigation came from outside the page
        duration = from === null ? 600 : 0;
        // toggle visbility in any case
        visible = true;
    });
</script>

{#if visible}
    <h1 in:fade={{ duration }}>Welcome to SvelteKit</h1>
{/if}