fade

Parameters

Delay (ms)

Duration (ms)

Preview

Code

Imports (in script tag):

typescript

import { fade } from "svelte/transition";

Attributes (for element):

typescript

transition:fade

Example component:

typescript

<script lang="ts">
	import { fade } from "svelte/transition";

	let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>
{#if show}
	<div transition:fade class="bg-primary-500 w-32 h-32" />
{/if}

<style>
	div {
		background-color: #00f;
		height: 8rem;
		width: 8rem;
	}
</style>

blur

Parameters

Delay (ms)

Duration (ms)

Select an easing function Select a variant Opacity

Amount (px)

Preview

Code

Imports (in script tag):

typescript

import { blur } from "svelte/transition";

Attributes (for element):

typescript

transition:blur

Example component:

typescript

<script lang="ts">
	import { blur } from "svelte/transition";

	let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>
{#if show}
	<div transition:blur class="bg-primary-500 w-32 h-32" />
{/if}

<style>
	div {
		background-color: #00f;
		height: 8rem;
		width: 8rem;
	}
</style>

fly

Parameters

Delay (ms)

Duration (ms)

Select an easing function Select a variant X (px)

Y (px)

Opacity

Preview

Code

Imports (in script tag):

typescript

import { fly } from "svelte/transition";

Attributes (for element):

typescript

transition:fly

Example component:

typescript

<script lang="ts">
	import { fly } from "svelte/transition";

	let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>
{#if show}
	<div transition:fly class="bg-primary-500 w-32 h-32" />
{/if}

<style>
	div {
		background-color: #00f;
		height: 8rem;
		width: 8rem;
	}
</style>

slide

Parameters

Delay (ms)

Duration (ms)

Select an easing function Select a variant

Select an axis

x

y

Preview

Code

Imports (in script tag):

typescript

import { slide } from "svelte/transition";

Attributes (for element):

typescript

transition:slide

Example component:

typescript

<script lang="ts">
	import { slide } from "svelte/transition";

	let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>
{#if show}
	<div transition:slide class="bg-primary-500 w-32 h-32" />
{/if}

<style>
	div {
		background-color: #00f;
		height: 8rem;
		width: 8rem;
	}
</style>

scale

Parameters

Delay (ms)

Duration (ms)

Select an easing function Select a variant Start

Opacity

Preview

Code

Imports (in script tag):

typescript

import { scale } from "svelte/transition";

Attributes (for element):

typescript

transition:scale

Example component:

typescript

<script lang="ts">
	import { scale } from "svelte/transition";

	let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>
{#if show}
	<div transition:scale class="bg-primary-500 w-32 h-32" />
{/if}

<style>
	div {
		background-color: #00f;
		height: 8rem;
		width: 8rem;
	}
</style>