Layout render with page transition

[gent-911]

Describe the bug

When you have couple of routes and go from one route to another - everything works just fine. As soon as you add some page transition - the layout breaks, you can observe some kind of ghosting i.e. the previous page is not removed, while the next route layout is simply added to the existing layout.

Extremely annoying "feature", the only way to avoid it is to write an absolute positioned wrapper and add a delay to it i.e. just wait for all the animation to complete.

I believe it is a bug, as svelte / sveltekit should detect that some out animation in progress and take care of clean up / transition to the next route.

Reproduction

I will try to provide the repo asap, but I guess the issue is very straight forward.

Logs

No response

System Info

System:
    OS: macOS 11.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.15 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.1 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 7.20.5 - /Volumes/Ext/Sites/ditech/node_modules/.bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.27 => 1.0.0-next.27 
    @sveltejs/adapter-static: ^1.0.0-next.16 => 1.0.0-next.16 
    @sveltejs/kit: ^1.0.0-next.143 => 1.0.0-next.146 
    svelte: ^3.34.0 => 3.42.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[benmccann]

There are already various open issues about this. E.g. #628