<script>
import { fly } from 'svelte/transition';
let data = [{ id: 0, value: Math.floor(Math.random() * 100) }];
function add() {
const randomIndex = Math.round(Math.random() * data.length);
data = [
...data.slice(0, randomIndex),
{ id: data.length, value: Math.floor(Math.random() * 100) },
...data.slice(randomIndex)
];
}
function remove() {
const randomIndex = Math.floor(Math.random() * data.length);
data = [
...data.slice(0, randomIndex),
...data.slice(randomIndex + 1)
];
}
</script>
<button on:click={add}>Randomly Add</button>
<button on:click={remove}>Randomly Remove</button>
{#each data as item (item.id)}
<div transition:fly={{y: 10}}>{ item.id } { item.value }</div>
{/each}