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

[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

Changes from 1 commit
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
36 changes: 26 additions & 10 deletions site/content/docs/03-template-syntax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

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