Skip to content

Commit

Permalink
fix typos and add sveltelab links
Browse files Browse the repository at this point in the history
  • Loading branch information
paoloricciuti committed Sep 17, 2023
1 parent 8ef3e5f commit 1aaf46b
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/weak-lemons-explain.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'sveltekit-view-transition': patch
---

fix typos and add sveltelab links
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ Optionally, the default animation can be modified via `::view-transition-old(roo
}
/* Or, just modify the duration. */
:gloabl(::view-transition-old(root)),
:gloabl(::view-transition-new(root)) {
:global(::view-transition-old(root)),
:global(::view-transition-new(root)) {
animation-duration: 2s;
}
</style>
Expand Down Expand Up @@ -107,7 +107,7 @@ One way to do this is with `transition`, a svelte [action](https://svelte.dev/tu
<style>
:global(::view-transition-old(header)),
:gloibal(::view-transition-new(header)) {
:global(::view-transition-new(header)) {
/* ... */
}
</style>
Expand Down Expand Up @@ -163,7 +163,7 @@ This can be achieved by returning an array, i.e. `["back"]`, to our `classes` ca

Now, we can target `.back::view-transition-old(back)` and `.back::view-transition-new(back)` in our CSS and those transitions will only be applied when navigating to the home page `/`.

In the example above, you can see we're destrucuring `navigation` from the provided `OnNavigate` object _(the same object that sveltekit will pass to the `onNavigate` function)_. This object contains a lot of useful information, including the page you are navigating to, allowing us to apply classes conditionally based on the navigation.
In the example above, you can see we're destructuring `navigation` from the provided `OnNavigate` object _(the same object that sveltekit will pass to the `onNavigate` function)_. This object contains a lot of useful information, including the page you are navigating to, allowing us to apply classes conditionally based on the navigation.

<details>
<summary>Click here to see the full <code>Navigation</code> interface.</summary>
Expand Down Expand Up @@ -378,10 +378,10 @@ By default the function will be internally wrapped in `afterNavigate` (to reassi

You can find some example of usage in the [examples](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/) folder.

| Example | Live demo | Features |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- | ----------------------------------------------------------------------- |
| [list-and-details](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/list-and-details) | [link](https://svt-list-and-details.vercel.app) | entry/exit animation, dynamic name, page transition from list to detail |
| [sveltegram](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/sveltegram) | [link](https://svt-sveltegram.vercel.app) | multiple element transitions, conditional apply based on route |
| Example | SvelteLab link | Live demo | Features |
| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------- |
| [list-and-details](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/list-and-details) | [link](https://sveltelab.dev/github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/list-and-details) | [link](https://svt-list-and-details.vercel.app) | entry/exit animation, dynamic name, page transition from list to detail |
| [sveltegram](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/sveltegram) | [link](https://sveltelab.dev/github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/sveltegram) | [link](https://svt-sveltegram.vercel.app) | multiple element transitions, conditional apply based on route |

## Contributing

Expand Down

1 comment on commit 1aaf46b

@vercel
Copy link

@vercel vercel bot commented on 1aaf46b Sep 17, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.