Svelte: 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 :)