svelte - How to persist a transition between page navigations in SvelteKit - Stack Overflow

admin管理员组

文章数量:1186976

I'm trying to smoothly close an overlay with svelte transition when a page navigation occurs with Svelte 5 and SvelteKit. It works perfectly when the overlay is in the component that does not change, as for example a general layout that never changes. but when the overlay is in a page that changes it closes abruptly and not smoothly when navigating. I guess it happens because the component that is doing the transition disappears from the user interface so it does not have time to do it, I could be wrong because I do not know in depth how SvelteKit navigations work. It is also possible that the same thing happens in nested layouts if you switch to different layouts.

The following code makes the overlay close smoothly when a navigation occurs, I infer that it works since the component that performs this transition is not being replaced in the navigation. layout

<script>
    import '../app.css';
    import { fade } from "svelte/transition";
    import { onNavigate } from "$app/navigation";
    /** @type {{children: import('svelte').Snippet}} */
    let { children } = $props();

    let isOpen = $state(false);

    // this works fine.
    onNavigate(() => {
        if(isOpen) {
            isOpen = false;
        }
    })
</script> 

<div class="app">
    <!-- navbar -->
    <div class="navbar">
        <a href="/about">To about</a>
        <button onclick={() => isOpen = true}>Open overlay in layout</button>
    </div>

    <main>
        {@render children()}
    </main>
    <!-- Layout modal -->
    {#if isOpen}
        <div transition:fade class="modal">
            <div>
                This is the Layout overlay, it closes smoothly just as I am looking for, it works perfectly. click the blue link to view.
            </div>
            <button onclick={()=> isOpen = false}>Close overlay</button>
            <hr>
            <a href="/about">click here to navigate to about</a>
        </div>
    {/if}
</div>

On the other hand, the following code does not close the overlay smoothly, it closes quickly and this is what I am looking to fix. page

<script lang="ts">
import { fade } from "svelte/transition";
import { onNavigate } from "$app/navigation";
let isOpen = $state(false);

// same behaviour with onDestroy, closes abruptly without fade transition.
onNavigate(() => {
        if(isOpen) {
            isOpen = false;
        }
    })
</script>


<svelte:head>
    <title>About</title>
    <meta name="description" content="About this app" />
</svelte:head>

<main>
    <h1>ABOUT</h1>
    click the following button to open the About overlay.
    <button onclick={() => isOpen = true}>Open About overlay</button>

    {#if isOpen}
        <div transition:fade class="modal">
            <div>
                <p>This is the about overlay, when navigation occurs, it closes abruptly and not smoothly, I want to fix this. click on the blue link below to navigate and see..</p>
                <button onclick={() => isOpen = false}>Close About modal</button>
                <a href="/">Navigate to home</a>
            </div>
        </div>
    {/if}
</main>

You can try the example in the following link stackblitz

I have tried different options like closing the overlay in onDestroy or onNavigate but it closes abruptly anyway ignoring the transition (as long as the component in transition is replaced).

I have also tried integrating an action in the component that sends the element to the body, so the element remains at least in the HTML document, but this did not work because when navigating the overlay was completely not iteractive, I guess it is because the code that gave interactivity to that component was replaced in the navigation anyway, so it only looked visually but did not have any functionality such as automatic closing.

If anyone knows any solution to solve this problem I would appreciate it.

本文标签： svelteHow to persist a transition between page navigations in SvelteKitStack Overflow