Instead of the transition directive, an element can have an in or an out directive, or both together. Import fade alongside fly...

import { fade, fly } from 'svelte/transition';

...then replace the transition directive with separate in and out directives:

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
	Flies in, fades out
</p>

In this case, the transitions are not reversed.



			
loading editor...

Console

loading Svelte compiler...


			
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


			
loading editor...