There needs to be an offset so the slide ends up at the correct position.

Someone mentioned in an old issue that jquery had a version of this that works so maybe checking that out could help: #2957

Hopefully someone smarter than me can fix this. Here's the transition before and after adding the offset:

Edit: after playing around and looking at 7nik's example below I have no idea anymore, it doesn't seem like a single offset at least. Adding an offset with the margin of the child element makes the child text stay in place but the background of the transitioning element looks wrong. Ideally the text should stay in place and the background should transition smoothly too.

Basically, it's caused by margin collapsing, but its rules are complicated. Moreover, margin collapsing may involve more than two elements, which may be non-adjacent siblings or non-direct parent-child, and all of it leads to a wide variety of tricky cases.

I tried to fix the first example, but you can see that inner content still jumps.

I tried to do it, but I don't know how reliable it is. Plus, it ignores writing-mode and white-space. Likely something else isn't taken into account.

I tried to do it, but I don't know how reliable it is. Plus, it ignores writing-mode and white-space. Likely something else isn't taken into account.

It looks good but isn't reversible in the in-out direction, eg. when you enable->disable or spam click it gets a bit glitchy.

Updated version (v4).
I'll blame Svelte's transition API for being limiting. I find Vue's transition API much better.

Updated version (v3). I'll blame Svelte's transition API for being limiting. I find Vue's transition API much better.

Is there anything specific that's missing or could be improved? Looks good now except if you double click from enabled->disabled->enabled it disappears instead of showing.

Is there anything specific that's missing or could be improved?

Some CSS like white-space: preserve and clear: both may still break things. In some edge cases, the condition of margin collapsibility or finding an adjacent margin may be wrong. I read specs, but it's hard to comprehend them.

if you double click from enabled->disabled->enabled it disappears instead of showing

Looks like a bug in all transitions.

In fact, even using Flexbox, you will encounter bouncing when there is a gap:

<script>
	import { slide } from 'svelte/transition';
	let visible = true;
</script>

<label>
	<input type="checkbox" bind:checked={visible} />
	bounce on "both" when flex-box has gap
</label>

<div class="div3">
	<p>slide in and out 3-1</p>
	{#if visible}
		<div transition:slide style="background-color: orangered;">
			<p>slide in and out 3-2</p>
		</div>
	{/if}
	<p>slide in and out 3-3</p>
	<p>slide in and out 3-4</p>
</div>

<style>
	.div3 {
		display: flex;
		flex-direction: column;
		gap: 5rem;
	}
</style>

REPL

It would be worse if there was a height or max-height there:

REPL

For example in a scroll-box:

REPL or REPL

Additional, I have to correct that the distinction in my original REPL as bounce on “in” / bounce on “out” was wrong.

In fact if you look at the video frame by frame, you will find that it actually exists in both directions, it is just more prominent in one direction due to visual effects.

I believe this entire issue will be classified as "won't fix" — margin collapse is a really complex topic (my incomplete solution is already bigger 5-6 times, and yesterday I looked at clear and found a case that can be resolved only by animating multiple elements, which is impossible with css fn, only with tick fn). Plus, the user's CSS can interfere with the animation styles, which can barely be anything.
Here is another example of messing with transition.

In all these cases, there are only two solutions:

1. change your CSS and/or DOM to remove the CSS interference;
2. write your own transition function that takes into account your case.

Writing a universal transition function isn't worth it — the code quickly becomes too large and heavy, while the goal of the built-in transition function is just covering common cases.

@7nik Pretty much agree with what you said.

But really, I think these examples are basic use cases, not complex situations.

This makes the built-in transition function probably almost worthless. (cause it's easy for people to hit the wall)

And it's necessary to explicitly mention these limitations and workarounds in the documentation.