mirror of https://github.com/sveltejs/svelte
fire intro.start and outro.start events (#702)
parent
5eff188b55
commit
e9f17f34ff
@ -1,2 +1 @@
|
||||
--bail
|
||||
test/test.js
|
@ -0,0 +1,35 @@
|
||||
export default {
|
||||
data: {
|
||||
visible: true,
|
||||
things: ['a', 'b', 'c', 'd']
|
||||
},
|
||||
|
||||
test (assert, component, target, window, raf) {
|
||||
raf.tick(50);
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.introCount, 4);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(component.introCount, 0);
|
||||
|
||||
component.set({ visible: false });
|
||||
|
||||
raf.tick(150);
|
||||
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.outroCount, 4);
|
||||
|
||||
raf.tick(200);
|
||||
assert.equal(component.outroCount, 0);
|
||||
|
||||
component.set({ visible: true });
|
||||
component.on('intro.start', () => {
|
||||
throw new Error(`intro.start should fire during set(), not after`);
|
||||
});
|
||||
|
||||
raf.tick(250);
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
|
||||
assert.equal(component.introCount, 4);
|
||||
|
||||
component.destroy();
|
||||
}
|
||||
};
|
@ -0,0 +1,45 @@
|
||||
{{#each things as thing}}
|
||||
{{#if visible}}
|
||||
<p transition:foo>{{thing}}</p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
||||
<script>
|
||||
export default {
|
||||
transitions: {
|
||||
foo: function ( node, params ) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
oncreate() {
|
||||
this.intros = [];
|
||||
this.outros = [];
|
||||
this.introCount = 0;
|
||||
this.outroCount = 0;
|
||||
|
||||
this.on('intro.start', ({ node }) => {
|
||||
this.intros.push(node.textContent);
|
||||
this.introCount += 1;
|
||||
});
|
||||
|
||||
this.on('intro.end', () => {
|
||||
this.introCount -= 1;
|
||||
});
|
||||
|
||||
this.on('outro.start', ({ node }) => {
|
||||
this.outros.push(node.textContent);
|
||||
this.outroCount += 1;
|
||||
});
|
||||
|
||||
this.on('outro.end', () => {
|
||||
this.outroCount -= 1;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue