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