You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -77,8 +77,8 @@ Optionally, the default animation can be modified via `::view-transition-old(roo
77
77
}
78
78
79
79
/* Or, just modify the duration. */
80
-
:gloabl(::view-transition-old(root)),
81
-
:gloabl(::view-transition-new(root)) {
80
+
:global(::view-transition-old(root)),
81
+
:global(::view-transition-new(root)) {
82
82
animation-duration: 2s;
83
83
}
84
84
</style>
@@ -107,7 +107,7 @@ One way to do this is with `transition`, a svelte [action](https://svelte.dev/tu
107
107
108
108
<style>
109
109
:global(::view-transition-old(header)),
110
-
:gloibal(::view-transition-new(header)) {
110
+
:global(::view-transition-new(header)) {
111
111
/* ... */
112
112
}
113
113
</style>
@@ -163,7 +163,7 @@ This can be achieved by returning an array, i.e. `["back"]`, to our `classes` ca
163
163
164
164
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 `/`.
165
165
166
-
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.
166
+
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.
167
167
168
168
<details>
169
169
<summary>Click here to see the full <code>Navigation</code> interface.</summary>
@@ -378,10 +378,10 @@ By default the function will be internally wrapped in `afterNavigate` (to reassi
378
378
379
379
You can find some example of usage in the [examples](https://github.com/paoloricciuti/sveltekit-view-transition/tree/main/examples/) folder.
|[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 |
384
-
|[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 |
|[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 |
384
+
|[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 |
0 commit comments