svelte
svelte copied to clipboard
Uneasy bouncing in `transition:slide`
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
Logs
No response
System Info
Svelte compiler version 4.2.18
Svelte compiler version 5.0.0-next.153
Severity
annoyance