### Starting Svelte Development Server with npm

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/list-and-details/README.md

This snippet shows how to start the development server for a Svelte project using `npm run dev`. It also includes an option to automatically open the application in a new browser tab, facilitating rapid development and testing.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Creating a Svelte Project with npm

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/list-and-details/README.md

This snippet demonstrates how to initialize a new Svelte project using `npm create svelte@latest`. It provides commands for creating a project in the current directory or a specified new directory, setting up the basic project structure.

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Starting SvelteKit Development Server

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/sveltegram/README.md

This snippet shows how to start the development server for a SvelteKit application. It includes commands to run the server normally or to automatically open the application in a new browser tab upon startup.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Building Svelte Production App with npm

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/list-and-details/README.md

This snippet provides the command to create a production-ready build of the Svelte application using `npm run build`. This command compiles and optimizes the project's assets for deployment, preparing it for a live environment.

```bash
npm run build
```

--------------------------------

### Installing sveltekit-view-transition Package

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This command installs the `sveltekit-view-transition` library as a development dependency using npm. Users can substitute `npm` with `pnpm` or `yarn` based on their preferred package manager to add the latest version of the library to their project.

```Bash
npm i -D sveltekit-view-transition@latest  # or pnpm/yarn
```

--------------------------------

### Basic View Transition Setup in SvelteKit Layout

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This Svelte snippet shows the simplest way to enable default view transitions across all navigations in a SvelteKit application. By importing and calling `setupViewTransition()` in the `+layout.svelte` file, the library automatically handles the necessary hooks for smooth page transitions.

```Svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	setupViewTransition();
</script>

<slot />
```

--------------------------------

### Enabling View Transitions with SvelteKit's onNavigate (Low-Level)

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This snippet demonstrates the low-level SvelteKit primitive for enabling view transitions. It uses the `onNavigate` hook to initiate a view transition before navigation completes, ensuring a smooth visual change between pages. It checks for browser support of `document.startViewTransition` and resolves a promise after the transition starts and navigation completes.

```TypeScript
onNavigate((navigation) => {
	if (!document.startViewTransition) return;
	return new Promise((resolve) => {
		document.startViewTransition(async () => {
			resolve();
			await navigation.complete;
		});
	});
});
```

--------------------------------

### Conditionally Applying View Transition with `shouldApply` in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This Svelte component extends the previous example by incorporating the `shouldApply` option alongside `applyImmediately`. It demonstrates how to apply a view transition name (`name: 'title'`) only when navigating *to* a specific detail page (`/post/[id]`) whose `id` matches the current post. This allows for fine-grained control over when forward transitions are initiated, complementing the `applyImmediately` for backward transitions.

```svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	const { transition } = setupViewTransition();

	export let data;
</script>

<ul>
	{#each data.posts as post (post.id)}
		<li
			use:transition={{
				/**
				 * in the post/[id] page we have a matching title transition name. Note that
				 * the transition name will only be applied moments before the actual transition
				 * if and when the shouldApply function returns true
				 */
				name: 'title',
				applyImmediately({ navigation }) {
					return navigation?.from?.params?.id === post.id.toString();
				},
				shouldApply({ navigation }) {
					// if the params.id i'm navigating to is equal to the id of the post
					// we add the title transition name.
					return navigation?.to?.params?.id === post.id.toString();
				},
			}}
		>
			<a href="/post/{post.id}">{post.title}</a>
		</li>
	{/each}
</ul>
```

--------------------------------

### Creating a Svelte Project with npm

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/sveltegram/README.md

This snippet demonstrates how to initialize a new SvelteKit project using `npm create svelte@latest`. It provides commands for creating a project in the current directory or a specified new directory, `my-app`.

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Building SvelteKit for Production

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/examples/sveltegram/README.md

This snippet provides the command to create a production-ready build of a SvelteKit application. This command compiles and optimizes the application for deployment.

```bash
npm run build
```

--------------------------------

### Applying Named View Transitions to Elements with Svelte Action

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This snippet illustrates how to apply specific view transitions to individual elements using the `transition` Svelte action returned by `setupViewTransition()`. By assigning a unique `view-transition-name` (e.g., 'header') to an element, its transition can be independently styled using the corresponding `::view-transition-old(name)` and `::view-transition-new(name)` CSS pseudo-elements, allowing for granular control over animations.

```Svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	const { transition } = setupViewTransition();
</script>

<header use:transition={'header'}>
	<!-- links -->
</header>

<slot />

<style>
	:global(::view-transition-old(header)),
	:global(::view-transition-new(header)) {
		/* ... */
	}
</style>
```

--------------------------------

### SvelteKit Navigation Interface Definition

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This TypeScript interface defines the structure of the `Navigation` object, which is passed to the `classes` callback in `sveltekit-view-transition`. It details properties like `from` and `to` (containing `params`, `route`, and `url` for source and destination), `type` of navigation (e.g., 'link', 'form', 'popstate'), `willUnload` status, `delta` for history navigation, and a `complete` promise.

```typescript
interface Navigation {
	/**
	 * Where navigation was triggered from
	 */
	from: {
		/**
		 * Parameters of the target page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.
		 * Is `null` if the target is not part of the SvelteKit app (could not be resolved to a route).
		 */
		params: Record<string, string> | null;
		/**
		 * Info about the target route
		 */
		route: { id: string | null };
		/**
		 * The URL that is navigated to
		 */
		url: URL;
	} | null;
	/**
	 * Where navigation is going to/has gone to
	 */
	to: {
		/**
		 * Parameters of the target page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.
		 * Is `null` if the target is not part of the SvelteKit app (could not be resolved to a route).
		 */
		params: Record<string, string> | null;
		/**
		 * Info about the target route
		 */
		route: { id: string | null };
		/**
		 * The URL that is navigated to
		 */
		url: URL;
	} | null;
	/**
	 * The type of navigation:
	 * - `form`: The user submitted a `<form>`
	 * - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
	 * - `link`: Navigation was triggered by a link click
	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect
	 * - `popstate`: Navigation was triggered by back/forward navigation
	 */
	type: 'form' | 'leave' | 'link' | 'goto' | 'popstate';
	/**
	 * Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)
	 */
	willUnload: false;
	/**
	 * In case of a history back/forward navigation, the number of steps to go back/forward
	 */
	delta?: number;
	/**
	 * A promise that resolves once the navigation is complete, and rejects if the navigation
	 * fails or is aborted. In the case of a `willUnload` navigation, the promise will never resolve
	 */
	complete: Promise<void>;
}
```

--------------------------------

### Conditionally Applying View Transition Classes in Svelte

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This Svelte component demonstrates how to use the `use:transition` directive with the `classes` option to conditionally apply CSS classes to an element during a view transition. It checks the `navigation.to?.route?.id` to apply the 'back' class when navigating to the home page ('/'), enabling specific CSS rules for that transition. The `setupViewTransition` function is imported from `sveltekit-view-transition`.

```svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	const { transition } = setupViewTransition();
</script>

<header
	use:transition={{
		name: 'header',
		classes({ navigation }) {
			if (navigation.to?.route?.id === '/') {
				return ['back'];
			}
		},
	}}
>
	<a href="/">Back</a>
</header>

<!-- etc -->
```

--------------------------------

### Customizing Default View Transition Animations in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This snippet demonstrates how to modify the default view transition animations using CSS. After calling `setupViewTransition()`, developers can target the `::view-transition-old(root)` and `::view-transition-new(root)` pseudo-elements globally to adjust properties like `animation-duration` or disable the default crossfade entirely by setting `view-transition-name: none` on the root element.

```Svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	setupViewTransition();
</script>

<slot />

<style>
	/* Disable default crossfade. */
	:root {
		view-transition-name: none;
	}

	/* Or, just modify the duration. */
	:global(::view-transition-old(root)),
	:global(::view-transition-new(root)) {
		animation-duration: 2s;
	}
</style>
```

--------------------------------

### Applying Conditional Root Classes with `classes` in SvelteKit View Transition

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This Svelte snippet demonstrates how to use the `classes` function from `sveltekit-view-transition` to dynamically add a CSS class to the `:root` element during navigation. It conditionally applies the 'back' class if the navigation target is the root route ('/'), allowing for custom view transition styling based on the navigation context.

```Svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	const { classes } = setupViewTransition();

	classes(({ navigation }) => {
		if (navigation.to?.route.id === '/') {
			return ['back'];
		}
	});
</script>
```

--------------------------------

### Applying View Transition Immediately in SvelteKit

Source: https://github.com/paoloricciuti/sveltekit-view-transition/blob/main/README.md

This Svelte component demonstrates how to use the `applyImmediately` option with `sveltekit-view-transition` to conditionally apply a view transition name. The `name: 'title'` transition is applied to a list item's title only when navigating back from a detail page (`/post/[id]`) where the `id` matches the current post's ID. This ensures the transition occurs precisely when needed for a smooth 'back' animation.

```svelte
<script>
	import { setupViewTransition } from 'sveltekit-view-transition';

	const { transition } = setupViewTransition();

	export let data;
</script>

<ul>
	{#each data.posts as post (post.id)}
		<li
			use:transition={{
				/**
				 * in the post/[id] page we have a matching title transition name
				 */
				name: 'title',
				applyImmediately({ navigation }) {
					// this will apply the title view transition to this element
					// only if it's the one that matches the id we are coming from
					// so for example if we were visiting /post/1 and this is the
					// post with id 1. Notice that i'm checking the `from` because
					// this will actually be called when the navigation is still happening
					// from post/1 to /
					return navigation?.from?.params?.id === post.id.toString();
				},
			}}
		>
			<a href="/post/{post.id}">{post.title}</a>
		</li>
	{/each}
</ul>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.