diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 4705c0ac9aad..777b4aec1add 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -376,8 +376,10 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline run(b: INTRO | OUTRO) { if (is_function(config)) { wait().then(() => { + const opts: TransitionOptions = { direction: b ? 'in' : 'out' }; + // @ts-ignore - config = config(options); + config = config(opts); go(b); }); } else { diff --git a/test/runtime/samples/transition-js-deferred-option-direction/_config.js b/test/runtime/samples/transition-js-deferred-option-direction/_config.js index 2bf448d9c7b2..71adc5539f9d 100644 --- a/test/runtime/samples/transition-js-deferred-option-direction/_config.js +++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js @@ -4,16 +4,19 @@ export default { const div_in = target.querySelector('#in'); 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_out.initial, 'out'); - assert.equal(div_both.initial, 'both'); + assert.equal(div_in.directions, 'in,in'); + assert.equal(div_out.directions, 'out'); + assert.equal(div_bothin.directions, 'both'); + assert.equal(div_bothout.directions, 'both'); return Promise.resolve().then(() => { - assert.equal(div_in.later, 'in'); - assert.equal(div_out.later, 'out'); - assert.equal(div_both.later, 'both'); + assert.equal(div_in.directions, 'in,in'); + assert.equal(div_out.directions, 'out,out'); + assert.equal(div_bothin.directions, 'both,in'); + assert.equal(div_bothout.directions, 'both,out'); }); } }; diff --git a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte index 9ac816ce75ff..76bca2b5e22e 100644 --- a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -2,10 +2,10 @@ export let visible; function foo(node, _params, options) { - node.initial = options.direction; + node.directions = options.direction; return (opts) => { - node.later = opts.direction; + node.directions += "," + opts.direction; return { duration: 10 @@ -15,10 +15,11 @@ {#if visible} -
- + + {/if} {#if !visible} - + + {/if}