From 1aaf46bac7d8addc03d76bbb5655e942fe33f29e Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Sun, 17 Sep 2023 15:46:12 +0200 Subject: [PATCH] fix typos and add sveltelab links --- .changeset/weak-lemons-explain.md | 5 +++++ README.md | 16 ++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/weak-lemons-explain.md diff --git a/.changeset/weak-lemons-explain.md b/.changeset/weak-lemons-explain.md new file mode 100644 index 0000000..46d01f1 --- /dev/null +++ b/.changeset/weak-lemons-explain.md @@ -0,0 +1,5 @@ +--- +'sveltekit-view-transition': patch +--- + +fix typos and add sveltelab links diff --git a/README.md b/README.md index ee23377..087eaa1 100644 --- a/README.md +++ b/README.md @@ -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; } @@ -107,7 +107,7 @@ One way to do this is with `transition`, a svelte [action](https://svelte.dev/tu @@ -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.
Click here to see the full Navigation interface. @@ -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