play transitions in slots - fixes #2303

pull/2309/head
Richard Harris 6 years ago
parent d1536b21a2
commit dbf0f6a2f3

@ -42,6 +42,10 @@ export default class SlotWrapper extends Wrapper {
}); });
block.add_dependencies(this.dependencies); block.add_dependencies(this.dependencies);
// we have to do this, just in case
block.add_intro();
block.add_outro();
} }
render( render(
@ -137,6 +141,14 @@ export default class SlotWrapper extends Wrapper {
} }
`); `);
block.builders.intro.add_line(
`if (${slot} && ${slot}.i) ${slot}.i(#local);`
);
block.builders.outro.add_line(
`if (${slot} && ${slot}.o) ${slot}.o(#local);`
);
let update_conditions = [...this.dependencies].map(name => `changed.${name}`).join(' || '); let update_conditions = [...this.dependencies].map(name => `changed.${name}`).join(' || ');
if (this.dependencies.size > 1) update_conditions = `(${update_conditions})`; if (this.dependencies.size > 1) update_conditions = `(${update_conditions})`;

@ -0,0 +1,9 @@
<script>
export let visible;
</script>
<div>
{#if visible}
<slot/>
{/if}
</div>

@ -0,0 +1,26 @@
export default {
props: {
visible: false
},
html: `
<div></div>
`,
test({ assert, component, target, window, raf }) {
component.visible = true;
const p = target.querySelector('p');
assert.equal(p.foo, 0);
raf.tick(50);
assert.equal(p.foo, 0.5);
component.visible = false;
raf.tick(75);
assert.equal(p.foo, 0.25);
raf.tick(100);
assert.equal(p.foo, 0);
}
};

@ -0,0 +1,18 @@
<script>
import Nested from './Nested.svelte';
export let visible;
function foo(node, params) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
</script>
<Nested {visible}>
<p transition:foo>slotted</p>
</Nested>
Loading…
Cancel
Save