svelte

8.6 KiB

Raw Blame History

title
svelte/transition

The svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw and crossfade. They are for use with Svelte transitions.

`fade`

EXPORT_SNIPPET: svelte/transition#fade

<!--- copy: false --->
transition:fade={params}

<!--- copy: false --->
in:fade={params}

<!--- copy: false --->
out:fade={params}

Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

fade accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default linear) — an easing function

You can see the fade transition in action in the transition tutorial.

<script>
	import { fade } from 'svelte/transition';
</script>

{#if condition}
	<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
{/if}

`blur`

EXPORT_SNIPPET: svelte/transition#blur

<!--- copy: false --->
transition:blur={params}

<!--- copy: false --->
in:blur={params}

<!--- copy: false --->
out:blur={params}

Animates a blur filter alongside an element's opacity.

blur accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicInOut) — an easing function
opacity (number, default 0) - the opacity value to animate out to and in from
amount (number | string, default 5) - the size of the blur. Supports css units (for example: "4rem"). The default unit is px

<script>
	import { blur } from 'svelte/transition';
</script>

{#if condition}
	<div transition:blur={{ amount: 10 }}>fades in and out</div>
{/if}

`fly`

EXPORT_SNIPPET: svelte/transition#fly

<!--- copy: false --->
transition:fly={params}

<!--- copy: false --->
in:fly={params}

<!--- copy: false --->
out:fly={params}

Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.

fly accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
x (number | string, default 0) - the x offset to animate out to and in from
y (number | string, default 0) - the y offset to animate out to and in from
opacity (number, default 0) - the opacity value to animate out to and in from

x and y use px by default but support css units, for example x: '100vw' or y: '50%'. You can see the fly transition in action in the transition tutorial.

<script>
	import { fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div
		transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
	>
		flies in and out
	</div>
{/if}

`slide`

EXPORT_SNIPPET: svelte/transition#slide

<!--- copy: false --->
transition:slide={params}

<!--- copy: false --->
in:slide={params}

<!--- copy: false --->
out:slide={params}

Slides an element in and out.

slide accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function

axis (x | y, default y) — the axis of motion along which the transition occurs

<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
		slides in and out horizontally
	</div>
{/if}

`scale`

EXPORT_SNIPPET: svelte/transition#scale

<!--- copy: false --->
transition:scale={params}

<!--- copy: false --->
in:scale={params}

<!--- copy: false --->
out:scale={params}

Animates the opacity and scale of an element. in transitions animate from an element's current (default) values to the provided values, passed as parameters. out transitions animate from the provided values to an element's default values.

scale accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number, default 400) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
start (number, default 0) - the scale value to animate out to and in from
opacity (number, default 0) - the opacity value to animate out to and in from

<script>
	import { scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
		scales in and out
	</div>
{/if}

`draw`

EXPORT_SNIPPET: svelte/transition#draw

<!--- copy: false --->
transition:draw={params}

<!--- copy: false --->
in:draw={params}

<!--- copy: false --->
out:draw={params}

Animates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.

draw accepts the following parameters:

delay (number, default 0) — milliseconds before starting
speed (number, default undefined) - the speed of the animation, see below.
duration (number | function, default 800) — milliseconds the transition lasts
easing (function, default cubicInOut) — an easing function

The speed parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: duration = length / speed. A path that is 1000 pixels with a speed of 1 will have a duration of 1000ms, setting the speed to 0.5 will double that duration and setting it to 2 will halve it.

<script>
	import { draw } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
	{#if condition}
		<path
			transition:draw={{ duration: 5000, delay: 500, easing: quintOut }}
			d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
			fill="none"
			stroke="cornflowerblue"
			stroke-width="0.1px"
			stroke-linejoin="round"
		/>
	{/if}
</svg>

`crossfade`

EXPORT_SNIPPET: svelte/transition#crossfade

The crossfade function creates a pair of transitions called send and receive. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the fallback transition is used.

crossfade accepts the following parameters:

delay (number, default 0) — milliseconds before starting
duration (number | function, default 800) — milliseconds the transition lasts
easing (function, default cubicOut) — an easing function
fallback (function) — A fallback transition to use for send when there is no matching element being received, and for receive when there is no element being sent.

<script>
	import { crossfade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';

	const [send, receive] = crossfade({
		duration: 1500,
		easing: quintOut
	});
</script>

{#if condition}
	<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
{:else}
	<small in:send={{ key }} out:receive={{ key }}>small elem</small>
{/if}

Types

TYPES: svelte/transition

8.6 KiB Raw Blame History

fade

blur

fly

slide

scale

draw

crossfade