Dynamic component transitions

[Rich-Harris]

REPL.

In a case like this...

<svelte:component this={X}>

...outro transitions are not played when the value of X changes.

In some situations we would want the before and after components to exist side-by-side (i.e. outro and intro happen simultaneously), in others we'd want out-then-in. In rare cases we might want in-then-out.

We could maybe do this by adding a directive unique to <svelte:component>, borrowing from Vue's transition modes:

<svelte:component this={X} switch:outin/>
<svelte:component this={Y} switch:inout/>
<svelte:component this={Z}/>

The default behaviour (when no switch directive is used) would be for in and out transitions to begin simultaneously.

Thoughts?

[Rich-Harris]

implemented in 2.9.0, albeit without the new switch directive (for now) — outro and intro will happen simultaneously, which means either a) you should avoid outro transitions other than deferred outros that exist to communicate with the corresponding intro, or b) components should be absolutely positioned to avoid glitching

[northkode]

is this implemented in v3+?

[izzymg]

@northkode Check #1569, it's default behaviour in v3.

The in and out directives are fired on the component belonging to this, so you just need to add something like <div in:fade> over the components, and svelte:component will trigger those :)

[jimafisk]

I'm having trouble getting the in transition to work for nested dynamic components (out works fine).

Here's a REPL that demonstrates the problem: https://svelte.dev/repl/5094a42378e742a8a9b7cb92915ebe72?version=3.55.1

I assume the dynamic component isn't loaded when the transition tries to first run. Is there a way I can enforce this? Adding a delay as mentioned on Stackoverflow didn't seem to help.

This is a greatly simplified example of what I'm trying to accomplish, but happy to flesh out some details if you're having trouble understanding my use-case. Thank you!