Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feat] Add options w/ direction to transitions #8068

Merged
merged 5 commits into from
Dec 5, 2022
Merged

[feat] Add options w/ direction to transitions #8068

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d37735
feat: Add options w/ direction to transitions
tivac Nov 30, 2022
1d81e1b
test: trailing newlines
tivac Nov 30, 2022
cc59eb2
fix style
baseballyama Dec 3, 2022
2785af5
docs: adjust based on feedback
tivac Dec 3, 2022
81e72bb
docs: updates from PR feedback
tivac Dec 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion site/content/docs/03-template-syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -971,7 +971,7 @@ transition:fn|local={params}


```js
transition = (node: HTMLElement, params: any) => {
transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
baseballyama marked this conversation as resolved.
Show resolved Hide resolved
delay?: number,
duration?: number,
easing?: (t: number) => number,
Expand Down Expand Up @@ -1091,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
<script>
export let visible = false;

function attribute(node, params, options) {
node.dataset.direction = options.direction;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is a real-world example.
(I didn't get node.dataset.direction will use for what?)

For example, I think we will add the below example.
(But I believe you are more familiar with the specific use cases than I am.)

export function my_transition(node, params, options) {
	const { direction } = options;
	if (direction === 'in') return wacky_intro_params(params);
	if (direction === 'out') return wacky_outro_params(params);
	return coordinated_outro(params);
}

And according to other examples, these should work after just copying and pasting.

Copy link
Contributor Author

@tivac tivac Dec 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My real-world usecase is a niche embedded browser that doesn't support generating @keyframes and injecting them dynamically, so I need to either use a pre-set @keyframes definition using css variables for the from/to values or I can inject inline styles to set up a transition, wait for a tick, and then change the style to trigger the transition.

Neither of which is super easy to do in a small example, so I was trying to do something extremely short to get the idea across.

I can make it do something when you copy and paste but it's gonna bloat out the example a bit 🫤

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Humm. I also thought example but I need 18 lines.
Then I think we don't need to show examples in the docs at least for now.
(Sorry for changing what I said🙏)

<script>
	import { slide, fade } from "svelte/transition";
	let visible;
	function custom_transition(node, params, options) {
		const { direction } = options;
		if (direction === "in") return () => slide(node, params);
		if (direction === "out") return () => fade(node, params);
		return null
	}
</script>

<button on:click={() => (visible = !visible)}>Click Me</button>
{#if visible}
	<div in:custom_transition={{ duration: 1000 }}>in</div>
{/if}
{#if visible}
	<div out:custom_transition={{ duration: 500 }}>out</div>
{/if}


return {
delay: params.delay || 0,
duration: params.duration || 400,
};
}
</script>

{#if visible}
<div in:attribute>
Attribute changes based on transition direction
</div>
{/if}
```

##### Transition events

Expand Down
18 changes: 11 additions & 7 deletions src/runtime/internal/transitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down
19 changes: 19 additions & 0 deletions test/runtime/samples/transition-js-deferred-option-direction/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export default {
test({ assert, component, target }) {
component.visible = true;

const div_in = target.querySelector('#in');
const div_out = target.querySelector('#out');
const div_both = target.querySelector('#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(div_in.later, 'in');
assert.equal(div_out.later, 'out');
assert.equal(div_both.later, 'both');
});
}
};
24 changes: 24 additions & 0 deletions test/runtime/samples/transition-js-deferred-option-direction/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script>
export let visible;
function foo(node, _params, options) {
node.initial = options.direction;
return (opts) => {
node.later = opts.direction;
return {
duration: 10
};
};
}
</script>

{#if visible}
<div id="both" transition:foo></div>
<div id="in" in:foo></div>
{/if}

{#if !visible}
<div id="out" out:foo></div>
{/if}
13 changes: 13 additions & 0 deletions test/runtime/samples/transition-js-option-direction/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default {
test({ assert, component, target }) {
component.visible = true;

const div_in = target.querySelector('#in');
const div_out = target.querySelector('#out');
const div_both = target.querySelector('#both');

assert.equal(div_in.direction, 'in');
assert.equal(div_out.direction, 'out');
assert.equal(div_both.direction, 'both');
}
};
20 changes: 20 additions & 0 deletions test/runtime/samples/transition-js-option-direction/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script>
export let visible = false;
function foo(node, _params, options) {
node.direction = options.direction;
return {
duration: 10
};
}
</script>

{#if visible}
<div id="both" transition:foo></div>
<div id="in" in:foo></div>
{/if}

{#if !visible}
<div id="out" out:foo></div>
{/if}