New page of different layout loaded and displayed before out animation is finished

[g012]

Describe the bug

Set an out animation on a link in a nested layout page, which links to a page using the parent layout above. Click on it: instantly, the next page is loaded and displayed below the current one, while the out animation plays. After it's finished, the current page disappears and navigation is complete.

Note: I can't reproduce it here, but in my full project it doesn't even hide the current page at the end, and pages pile up one after the other on the bottom as I continue navigating back and forth, with no page ever disappearing.

Note: I use adapter-static, not sure it's relevant.

Expected result:
It seems to me the new page and its layout should be loaded only AFTER all out animations are complete.

Reproduction

https://github.com/g012/svelte-anim-link

Just run the code from this repo, then click the "Go Test" button, then click either "Go Home" or "Link Home" from the new page. Observe the bug.

Logs

No response

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 28.73 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/local/bin/yarn
    npm: 8.1.3 - /opt/local/bin/npm
  Browsers:
    Brave Browser: 94.1.30.89
    Chrome: 100.0.4896.127
    Firefox: 99.0.1
    Firefox Developer Edition: 100.0
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.40
    @sveltejs/adapter-static: ^1.0.0-next.29 => 1.0.0-next.29
    @sveltejs/kit: next => 1.0.0-next.324
    svelte: ^3.44.0 => 3.47.0

Severity

serious, but I can work around it

Additional Information

No response

[moritzebeling]

I have not tried your sample code, but I regularly run into this problem with page transitions.
It usually can be solved by adding a delay to the in transition, that is at least as long as the out duration:

e.g.: in:fade={{ duration: 1000, delay: 501 }} out:fade={{ duration: 500 }}

[Rich-Harris]

This is expected behaviour — in Svelte, in and out transitions play simultaneously, otherwise you couldn't do things like this: https://svelte.dev/repl/97d3f7c689c7439686d5a3cacfdfd82b?version=3.48.0. It would also be impossible to do deferred transitions.

As @moritzebeling suggests, you can use delay to control the behaviour (e.g. https://svelte.dev/repl/19797e30fd4b4092a61db1a836d5a171?version=3.48.0); you can also use things like position: absolute to keep things out of the document flow so that they can exist in the same part of the screen (though this can get a bit finicky).

It would definitely be nice to have slightly more control over transitions (e.g. a staggered mode), though strictly speaking that's an issue for Svelte rather than SvelteKit (which knows nothing about transitions). It's something I hope to look at later this year. For now, will close this issue as there's nothing to change in SvelteKit itself.

(Though if you're able to reproduce "pages pile up one after the other on the bottom as I continue navigating back and forth, with no page ever disappearing", please do open a new issue!)