breaking: send in/out to transition fn (#8318)

Instead of "both", which doesn't make sense at that point.
pull/8515/head
Pat Cavit 2 years ago committed by Simon Holthausen
parent b95ae0ef3c
commit 54bb1f42ee

@ -376,8 +376,10 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
run(b: INTRO | OUTRO) { run(b: INTRO | OUTRO) {
if (is_function(config)) { if (is_function(config)) {
wait().then(() => { wait().then(() => {
const opts: TransitionOptions = { direction: b ? 'in' : 'out' };
// @ts-ignore // @ts-ignore
config = config(options); config = config(opts);
go(b); go(b);
}); });
} else { } else {

@ -4,16 +4,19 @@ export default {
const div_in = target.querySelector('#in'); const div_in = target.querySelector('#in');
const div_out = target.querySelector('#out'); const div_out = target.querySelector('#out');
const div_both = target.querySelector('#both'); const div_bothin = target.querySelector('#both-in');
const div_bothout = target.querySelector('#both-out');
assert.equal(div_in.initial, 'in'); assert.equal(div_in.directions, 'in,in');
assert.equal(div_out.initial, 'out'); assert.equal(div_out.directions, 'out');
assert.equal(div_both.initial, 'both'); assert.equal(div_bothin.directions, 'both');
assert.equal(div_bothout.directions, 'both');
return Promise.resolve().then(() => { return Promise.resolve().then(() => {
assert.equal(div_in.later, 'in'); assert.equal(div_in.directions, 'in,in');
assert.equal(div_out.later, 'out'); assert.equal(div_out.directions, 'out,out');
assert.equal(div_both.later, 'both'); assert.equal(div_bothin.directions, 'both,in');
assert.equal(div_bothout.directions, 'both,out');
}); });
} }
}; };

@ -2,10 +2,10 @@
export let visible; export let visible;
function foo(node, _params, options) { function foo(node, _params, options) {
node.initial = options.direction; node.directions = options.direction;
return (opts) => { return (opts) => {
node.later = opts.direction; node.directions += "," + opts.direction;
return { return {
duration: 10 duration: 10
@ -15,10 +15,11 @@
</script> </script>
{#if visible} {#if visible}
<div id="both" transition:foo></div> <div id="both-in" transition:foo />
<div id="in" in:foo></div> <div id="in" in:foo />
{/if} {/if}
{#if !visible} {#if !visible}
<div id="out" out:foo></div> <div id="out" out:foo />
<div id="both-out" transition:foo={{ duration: 500 }} />
{/if} {/if}

Loading…
Cancel
Save