From 3d37735136b1129999980bec64cc79ebaca32c57 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Wed, 30 Nov 2022 12:04:56 -0800 Subject: [PATCH 1/5] feat: Add options w/ direction to transitions Closes #3918 and supersedes #4019 (extremely similar change, mostly just adds tests/docs) --- site/content/docs/03-template-syntax.md | 12 +++++++++- src/runtime/internal/transitions.ts | 18 ++++++++------ .../_config.js | 19 +++++++++++++++ .../main.svelte | 24 +++++++++++++++++++ .../transition-js-option-direction/_config.js | 13 ++++++++++ .../main.svelte | 21 ++++++++++++++++ 6 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/main.svelte create mode 100644 test/runtime/samples/transition-js-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-option-direction/main.svelte diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 9afe39946990..4f9cd43d4bc6 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -971,7 +971,7 @@ transition:fn|local={params} ```js -transition = (node: HTMLElement, params: any) => { +transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => { delay?: number, duration?: number, easing?: (t: number) => number, @@ -1014,6 +1014,16 @@ Like actions, transitions can have parameters. {/if} ``` +##### Transition options + +--- + +Transitions also get passed an options object which provides data about the type of transition. + +Possible values in the options object are: + +* `direction` - one of `in`, `out`, or `both` depending on the type of transition + ##### Custom transition functions --- diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 9aa45dc4f10b..4705c0ac9aad 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -86,10 +86,12 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca const null_transition: TransitionConfig = { duration: 0 }; -type TransitionFn = (node: Element, params: any) => TransitionConfig; +type TransitionOptions = { direction: 'in' | 'out' | 'both' }; +type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig; export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'in' }; + let config = fn(node, params, options); let running = false; let animation_name; let task; @@ -150,7 +152,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: delete_rule(node); if (is_function(config)) { - config = config(); + config = config(options); wait().then(go); } else { go(); @@ -171,7 +173,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: } export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'out' }; + let config = fn(node, params, options); let running = true; let animation_name; @@ -224,7 +227,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); go(); }); } else { @@ -264,7 +267,8 @@ interface Program { } export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'both' }; + let config = fn(node, params, options); let t = intro ? 0 : 1; @@ -373,7 +377,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); 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 new file mode 100644 index 000000000000..54e91a63f03c --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js @@ -0,0 +1,19 @@ +export default { + test({ assert, component, target, raf }) { + component.visible = true; + + const divIn = target.querySelector('#in'); + const divOut = target.querySelector('#out'); + const divBoth = target.querySelector('#both'); + + assert.equal(divIn.initial, 'in'); + assert.equal(divOut.initial, 'out'); + assert.equal(divBoth.initial, 'both'); + + return Promise.resolve().then(() => { + assert.equal(divIn.later, 'in'); + assert.equal(divOut.later, 'out'); + assert.equal(divBoth.later, 'both'); + }); + } +}; diff --git a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte new file mode 100644 index 000000000000..394b15009fee --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -0,0 +1,24 @@ + + +{#if visible} +
+
+{/if} + +{#if !visible} +
+{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-option-direction/_config.js b/test/runtime/samples/transition-js-option-direction/_config.js new file mode 100644 index 000000000000..b2c2b52ba76c --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/_config.js @@ -0,0 +1,13 @@ +export default { + test({ assert, component, target }) { + component.visible = true; + + const divIn = target.querySelector('#in'); + const divOut = target.querySelector('#out'); + const divBoth = target.querySelector('#both'); + + assert.equal(divIn.direction, 'in'); + assert.equal(divOut.direction, 'out'); + assert.equal(divBoth.direction, 'both'); + } +}; diff --git a/test/runtime/samples/transition-js-option-direction/main.svelte b/test/runtime/samples/transition-js-option-direction/main.svelte new file mode 100644 index 000000000000..516a7f6062df --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/main.svelte @@ -0,0 +1,21 @@ + + +{#if visible} +
+
+{/if} + +{#if !visible} +
+{/if} \ No newline at end of file From 1d81e1bf6b276d342ef1e04a0f9540574090d301 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Wed, 30 Nov 2022 12:07:13 -0800 Subject: [PATCH 2/5] test: trailing newlines --- .../samples/transition-js-deferred-option-direction/main.svelte | 2 +- test/runtime/samples/transition-js-option-direction/main.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 394b15009fee..eb602e666d8d 100644 --- a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -21,4 +21,4 @@ {#if !visible}
-{/if} \ No newline at end of file +{/if} diff --git a/test/runtime/samples/transition-js-option-direction/main.svelte b/test/runtime/samples/transition-js-option-direction/main.svelte index 516a7f6062df..87cac541d7fa 100644 --- a/test/runtime/samples/transition-js-option-direction/main.svelte +++ b/test/runtime/samples/transition-js-option-direction/main.svelte @@ -18,4 +18,4 @@ {#if !visible}
-{/if} \ No newline at end of file +{/if} From cc59eb2b1c7aa3244ca971277646a14a280cd883 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Sat, 3 Dec 2022 15:31:05 +0900 Subject: [PATCH 3/5] fix style --- .../_config.js | 20 +++++++++---------- .../main.svelte | 6 +++--- .../transition-js-option-direction/_config.js | 12 +++++------ .../main.svelte | 7 +++---- 4 files changed, 22 insertions(+), 23 deletions(-) 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 54e91a63f03c..2bf448d9c7b2 100644 --- a/test/runtime/samples/transition-js-deferred-option-direction/_config.js +++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js @@ -1,19 +1,19 @@ export default { - test({ assert, component, target, raf }) { + test({ assert, component, target }) { component.visible = true; - const divIn = target.querySelector('#in'); - const divOut = target.querySelector('#out'); - const divBoth = target.querySelector('#both'); + const div_in = target.querySelector('#in'); + const div_out = target.querySelector('#out'); + const div_both = target.querySelector('#both'); - assert.equal(divIn.initial, 'in'); - assert.equal(divOut.initial, 'out'); - assert.equal(divBoth.initial, 'both'); + assert.equal(div_in.initial, 'in'); + assert.equal(div_out.initial, 'out'); + assert.equal(div_both.initial, 'both'); return Promise.resolve().then(() => { - assert.equal(divIn.later, 'in'); - assert.equal(divOut.later, 'out'); - assert.equal(divBoth.later, 'both'); + assert.equal(div_in.later, 'in'); + assert.equal(div_out.later, 'out'); + assert.equal(div_both.later, 'both'); }); } }; 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 eb602e666d8d..9ac816ce75ff 100644 --- a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -1,14 +1,14 @@ From 2785af528492bd354e883078f93b9c54aaba22bf Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Fri, 2 Dec 2022 23:15:17 -0800 Subject: [PATCH 4/5] docs: adjust based on feedback --- site/content/docs/03-template-syntax.md | 36 ++++++++++++++++++------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 4f9cd43d4bc6..d40586915dce 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -1014,16 +1014,6 @@ Like actions, transitions can have parameters. {/if} ``` -##### Transition options - ---- - -Transitions also get passed an options object which provides data about the type of transition. - -Possible values in the options object are: - -* `direction` - one of `in`, `out`, or `both` depending on the type of transition - ##### Custom transition functions --- @@ -1101,6 +1091,32 @@ A custom transition function can also return a `tick` function, which is called If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible. +Transition functions also receive a third argument, `options`, which contains information about the transition. + +Available values in the `options` object are: + +* `direction` - one of `in`, `out`, or `both` depending on the type of transition + +```sv + + +{#if visible} +
+ Attribute changes based on transition direction +
+{/if} +``` ##### Transition events From 81e72bbe1b20377fa61a935118fb863f745a8483 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Sun, 4 Dec 2022 10:51:28 -0800 Subject: [PATCH 5/5] docs: updates from PR feedback --- site/content/docs/03-template-syntax.md | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index d40586915dce..de7ded9d6c2c 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -1095,28 +1095,7 @@ Transition functions also receive a third argument, `options`, which contains in Available values in the `options` object are: -* `direction` - one of `in`, `out`, or `both` depending on the type of transition - -```sv - - -{#if visible} -
- Attribute changes based on transition direction -
-{/if} -``` +* `direction` - one of `in`, `out`, or `bidirectional` depending on the type of transition ##### Transition events