mirror of https://github.com/sveltejs/svelte
Fix for #2655 - adding introstart...outroend events to in-out transition
parent
7105788214
commit
2785fa6cb5
@ -0,0 +1,71 @@
|
||||
export default {
|
||||
props: {
|
||||
visible: false,
|
||||
things: ['a', 'b', 'c', 'd']
|
||||
},
|
||||
|
||||
// intro: true,
|
||||
|
||||
html: `
|
||||
<p>waiting...</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, raf }) {
|
||||
component.visible = true;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>introstart</p>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
`);
|
||||
|
||||
await raf.tick(50);
|
||||
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.intro_count, 4);
|
||||
|
||||
await raf.tick(100);
|
||||
assert.equal(component.intro_count, 0);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>introend</p>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
`);
|
||||
|
||||
component.visible = false;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>outrostart</p>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
`);
|
||||
|
||||
await raf.tick(150);
|
||||
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.outro_count, 4);
|
||||
|
||||
await raf.tick(200);
|
||||
assert.equal(component.outro_count, 0);
|
||||
|
||||
component.visible = true;
|
||||
|
||||
await raf.tick(250);
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
|
||||
assert.equal(component.intro_count, 4);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>introstart</p>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let things;
|
||||
export let visible;
|
||||
|
||||
export let intros = [];
|
||||
export let outros = [];
|
||||
export let intro_count = 0;
|
||||
export let outro_count = 0;
|
||||
|
||||
let status = 'waiting...';
|
||||
|
||||
function foo(node, params) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function introstart(e) {
|
||||
intros.push(e.target.textContent);
|
||||
intro_count += 1;
|
||||
status = 'introstart';
|
||||
}
|
||||
|
||||
function introend(e) {
|
||||
intro_count -= 1;
|
||||
status = 'introend';
|
||||
}
|
||||
|
||||
function outrostart(e) {
|
||||
outros.push(e.target.textContent);
|
||||
outro_count += 1;
|
||||
status = 'outrostart';
|
||||
}
|
||||
|
||||
function outroend(e) {
|
||||
outro_count -= 1;
|
||||
status = 'outroend';
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>{status}</p>
|
||||
|
||||
{#each things as thing}
|
||||
{#if visible}
|
||||
<p
|
||||
in:foo
|
||||
out:foo
|
||||
on:introstart={introstart}
|
||||
on:introend={introend}
|
||||
on:outrostart={outrostart}
|
||||
on:outroend={outroend}
|
||||
>{thing}</p>
|
||||
{/if}
|
||||
{/each}
|
Loading…
Reference in new issue