Svelte: Equivalent of Vue's out-in transition mode

[Rich-Harris]

For elements that are positioned statically or relatively, intros that happen at the same time as outros can be problematic:

{{#if foo}}
  <div transition:fade='{duration:1500}'>yep</div>
{{else}}
  <div transition:fade='{duration:1500}'>nope</div>
{{/if}}

Vue has a nice solution to this — transition modes. Since Svelte doesn't have an equivalent of <transition>, the concept doesn't translate directly, but it would be nice to be able to express something similar without the hacky use of delay.

[aubergene]

Just my 2¢ but this seems too fancy too me, just let people do whatever with CSS. The Vue docs demo of in-out doesn't even appear to work smoothly without a jump for me in Firefox 57

[antony]

I'm not 100% sure that the current behaviour feels like a hack:

https://svelte.dev/repl/07465934948446f2b1fe823731225c57?version=3.18.2

Seems fairly reasonable to me. Unless there is specific appetite for improving transitions further?

[Blazzike]

https://svelte.dev/repl/96ade4f9af6c4bb59dc2ea23c43f72f2?version=3.18.2

@antony this is the problem with that method.

[FractalHQ]

I encounter this problem in all of my Svelte projects- feels like I'm missing something. Fighting it with absolute positioning usually forces me to re-write a lot of CSS multiple times.

Is there is a better way to solve this that I've overlooked? Or would it be better to use an external animation library for animation-heavy projects?

+1 to the appetite for further improving transitions 😁

[TylerRick]

What do you think of the workaround (position: "absolute") mentioned here?