mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
564 B
30 lines
564 B
4 years ago
|
<script>
|
||
|
function fade(node) {
|
||
|
return {
|
||
|
duration: 400,
|
||
|
tick(t) {
|
||
|
node.setAttribute('t', t);
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
|
||
|
let shown = true;
|
||
|
let _id = 1;
|
||
|
let items = [];
|
||
|
|
||
|
export const toggle = () => (shown = !shown);
|
||
|
export const add = () => {
|
||
|
items = items.concat({ _id, name: `Thing ${_id}` });
|
||
|
_id++;
|
||
|
};
|
||
|
export const remove = (id) => (items = items.filter(({ _id }) => _id !== id));
|
||
|
</script>
|
||
|
|
||
|
{#if shown}
|
||
|
<section transition:fade>
|
||
|
{#each items as thing (thing._id)}
|
||
|
<div in:fade|local out:fade|local>{thing.name}</div>
|
||
|
{/each}
|
||
|
</section>
|
||
|
{/if}
|