mirror of https://github.com/sveltejs/svelte
keep each block value (#5841)
parent
63669330f6
commit
08cb3142e9
@ -0,0 +1,57 @@
|
||||
export default {
|
||||
html: '<section></section>',
|
||||
async test({ assert, component, target, raf }) {
|
||||
await component.add();
|
||||
await component.add();
|
||||
|
||||
let time = 0;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<section>
|
||||
<div t="0">Thing 1</div>
|
||||
<div t="0">Thing 2</div>
|
||||
</section>
|
||||
`);
|
||||
|
||||
raf.tick(time += 400);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<section>
|
||||
<div t="1">Thing 1</div>
|
||||
<div t="1">Thing 2</div>
|
||||
</section>
|
||||
`);
|
||||
|
||||
await component.toggle();
|
||||
// transition halfway
|
||||
raf.tick(time += 200);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<section t="0.5">
|
||||
<div t="1">Thing 1</div>
|
||||
<div t="1">Thing 2</div>
|
||||
</section>
|
||||
`);
|
||||
|
||||
await component.toggle();
|
||||
// transition back
|
||||
raf.tick(time += 200);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<section t="1">
|
||||
<div t="1">Thing 1</div>
|
||||
<div t="1">Thing 2</div>
|
||||
</section>
|
||||
`);
|
||||
|
||||
await component.remove(1);
|
||||
|
||||
raf.tick(time += 400);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<section t="1">
|
||||
<div t="1">Thing 2</div>
|
||||
</section>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,29 @@
|
||||
<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}
|
Loading…
Reference in new issue