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
This code may look a bit intimidating – if you're curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.
83
-
84
-
As mentioned above, the `onNavigate` callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if `document.startViewTransition` exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.
85
-
86
-
We then return a promise to delay completing the navigation until the view transition has started. We use a [promise constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) so that we can control when the promise resolves.
87
-
88
-
```js
89
-
// @errors: 1108
90
-
returnnewPromise((resolve) => {
91
-
document.startViewTransition(async () => {
92
-
resolve();
93
-
awaitnavigation.complete;
94
-
});
95
-
});
96
-
```
97
-
98
-
Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until _after_ we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.
99
-
100
-
Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting `navigation.complete`. Once `navigation.complete` resolves, the new page has been loaded into the DOM and the browser can animate between the two states.
101
-
102
-
It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.
103
-
104
-
</details>
79
+
> [!DETAILS] How the code works
80
+
> This code may look a bit intimidating – if you're curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.
81
+
>
82
+
> As mentioned above, the `onNavigate` callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if `document.startViewTransition` exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.
83
+
>
84
+
> We then return a promise to delay completing the navigation until the view transition has started. We use a [promise constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) so that we can control when the promise resolves.
85
+
>
86
+
> ```js
87
+
>// @errors: 1108
88
+
>returnnewPromise((resolve) => {
89
+
>document.startViewTransition(async () => {
90
+
>resolve();
91
+
>awaitnavigation.complete;
92
+
> });
93
+
> });
94
+
>```
95
+
>
96
+
> Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until > _after_ we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.
97
+
>
98
+
> Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting `navigation.complete`. Once `navigation.complete` resolves, the new page has been loaded into the DOM and the browser can animate between the two states.
99
+
>
100
+
> It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.
105
101
106
102
## Customizing the transition with CSS
107
103
@@ -163,38 +159,34 @@ Now, the header will not transition in and out on navigation, but the rest of th
Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
> Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
0 commit comments