Skip to content

Commit

Permalink
site: add view transitions and transition blog title (sveltejs#9164)
Browse files Browse the repository at this point in the history
* Add view transitions and transition blog title

* Scope view transitions to /blog routes
  • Loading branch information
geoffrich authored Aug 31, 2023
1 parent 8e76ef1 commit 2188035
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 23 deletions.
34 changes: 16 additions & 18 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sites/svelte.dev/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"devDependencies": {
"@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-vercel": "^3.0.3",
"@sveltejs/kit": "^1.22.6",
"@sveltejs/kit": "^1.24.0",
"@sveltejs/site-kit": "6.0.0-next.36",
"@sveltejs/vite-plugin-svelte": "^2.4.5",
"@types/cookie": "^0.5.1",
Expand Down
22 changes: 22 additions & 0 deletions sites/svelte.dev/src/app.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}

// add these lines
interface ViewTransition {
updateCallbackDone: Promise<void>;
ready: Promise<void>;
finished: Promise<void>;
skipTransition: () => void;
}

interface Document {
startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
}
}

export {};
16 changes: 16 additions & 0 deletions sites/svelte.dev/src/routes/blog/+layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script>
import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
</script>

<slot />
11 changes: 9 additions & 2 deletions sites/svelte.dev/src/routes/blog/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
{#if !post.draft}
<article class="post" data-pubdate={post.date}>
<a class="no-underline" href="/blog/{post.slug}" title="Read the article »">
<h2>{post.title}</h2>
<p>{post.description}</p>
<h2 style:--name="post-title-{post.slug}">{post.title}</h2>
<p class="description" style:--name="post-description-{post.slug}">{post.description}</p>
</a>
</article>
{/if}
Expand All @@ -49,6 +49,13 @@
font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
h2,
.description {
view-transition-name: var(--name);
}
}
.post:first-child {
margin: 0 0 2rem 0;
padding: 0 0 4rem 0;
Expand Down
13 changes: 11 additions & 2 deletions sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@
</svelte:head>

<article class="post listify text">
<h1>{data.post.title}</h1>
<p class="standfirst">{data.post.description}</p>
<h1 style:--name="post-title-{$page.params.slug}">{data.post.title}</h1>
<p class="standfirst" style:--name="post-description-{$page.params.slug}">
{data.post.description}
</p>

<p class="byline">
<a href={data.post.author.url}>{data.post.author.name}</a>
Expand Down Expand Up @@ -52,6 +54,13 @@
margin: 0 0 1em 0;
}
@media (prefers-reduced-motion: no-preference) {
h1,
.standfirst {
view-transition-name: var(--name);
}
}
.byline {
margin: 0 0 6rem 0;
padding: 1.6rem 0 0 0;
Expand Down

0 comments on commit 2188035

Please sign in to comment.