svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Uneasy bouncing in `transition:slide`

Open qupig opened this issue 8 months ago • 12 comments

Describe the bug

Check the REPL. This issues can be reproduced in Svelte4/5.

source code
<script>
	import { slide } from 'svelte/transition';
	let visible1 = true;
	let visible2 = true;
	let visible3 = true;
</script>

<label>
	<input type="checkbox" bind:checked={visible1} />
	bounce on "in"
</label>
<label>
	<input type="checkbox" bind:checked={visible2} />
	bounce on "out"
</label>
<label>
	<input type="checkbox" bind:checked={visible3} />
	Normal and smooth
</label>

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

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

<div class="div3">
	{#if visible3}
		<div transition:slide style="background-color: orangered;">
			<p>slide in and out 3-1</p>
			<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;
	}
</style>
demo video

https://github.com/sveltejs/svelte/assets/61939856/9b209e6f-99dc-4478-a18c-16e05f51ba3d

Reproduction

REPL

Logs

No response

System Info

Svelte compiler version 4.2.18
Svelte compiler version 5.0.0-next.153

Severity

annoyance

qupig avatar Jun 11 '24 22:06 qupig