Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
Instead, we'd like transitions to play only when individual items are added and removed — in other words, when the user drags the slider.
We can achieve this with a local transition, which only plays when the immediate parent block is added or removed:
<div transition:slide|local>
{item}
</div>
App.svelte
xxxxxxxxxx
32
1
<script>
2
import { slide } from 'svelte/transition';
3
4
let showItems = true;
5
let i = 5;
6
let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
7
</script>
8
9
<style>
10
div {
11
padding: 0.5em 0;
12
border-top: 1px solid #eee;
13
}
14
</style>
15
16
<label>
17
<input type="checkbox" bind:checked={showItems}>
18
show list
19
</label>
Console
bundling https://unpkg.com/svelte@3/internal/index.mjs
xxxxxxxxxx
299
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
add_render_callback,
5
append,
6
attr,
7
check_outros,
8
create_bidirectional_transition,
9
destroy_each,
10
detach,
11
element,
12
empty,
13
group_outros,
14
init,
15
insert,
16
listen,
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
div.svelte-1h8u25k{padding:0.5em 0;border-top:1px solid #eee}