<script>
import { slide } from "svelte/transition";
import {onMount} from 'svelte'
let items = [];
let id = 0;
let itemsFetched = false
onMount(async() => {
setTimeout(() => {
items = [
{id: id, name: `item ${id++}`},
{id: id, name: `item ${id++}`},
{id: id, name: `item ${id++}`},
];
console.log('fetched')
itemsFetched = true
},1000)
})
function addItem() {
items = [
...items,
{id: id, name: `item ${id++}`},
];
}
</script>
<button on:click={addItem}>add</button>
{#if itemsFetched}
<div id="outer">
{#each items as it (it.id)}
<div transition:slide|local={{duration: 2000}}>
<p>{it.id} {it.name}</p>
</div>