The svelte/transition
module exports seven functions: fade
, blur
, fly
, slide
, scale
, draw
and crossfade
. They are for use with Svelte transitions
.
fadepermalink
ts
function fade(node: Element,{ delay, duration, easing }?: FadeParams | undefined): TransitionConfig;
transition:fade={params}
in:fade={params}
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 startingduration
(number
, default 400) — milliseconds the transition lastseasing
(function
, defaultlinear
) — 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}
blurpermalink
ts
function blur(node: Element,{delay,duration,easing,amount,opacity}?: BlurParams | undefined): TransitionConfig;
transition:blur={params}
in:blur={params}
out:blur={params}
Animates a blur
filter alongside an element's opacity.
blur
accepts the following parameters:
delay
(number
, default 0) — milliseconds before startingduration
(number
, default 400) — milliseconds the transition lastseasing
(function
, defaultcubicInOut
) — an easing functionopacity
(number
, default 0) - the opacity value to animate out to and in fromamount
(number | string
, default 5) - the size of the blur. Supports css units (for example:"4rem"
). The default unit ispx
<script>
import { blur } from 'svelte/transition';
</script>
{#if condition}
<div transition:blur={{ amount: 10 }}>fades in and out</div>
{/if}
flypermalink
ts
function fly(node: Element,{delay,duration,easing,x,y,opacity}?: FlyParams | undefined): TransitionConfig;
transition:fly={params}
in:fly={params}
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 startingduration
(number
, default 400) — milliseconds the transition lastseasing
(function
, defaultcubicOut
) — an easing functionx
(number | string
, default 0) - the x offset to animate out to and in fromy
(number | string
, default 0) - the y offset to animate out to and in fromopacity
(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}
slidepermalink
ts
function slide(node: Element,{delay,duration,easing,axis}?: SlideParams | undefined): TransitionConfig;
transition:slide={params}
in:slide={params}
out:slide={params}
Slides an element in and out.
slide
accepts the following parameters:
delay
(number
, default 0) — milliseconds before startingduration
(number
, default 400) — milliseconds the transition lastseasing
(function
, defaultcubicOut
) — an easing function
axis
(x
|y
, defaulty
) — 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}
scalepermalink
ts
function scale(node: Element,{delay,duration,easing,start,opacity}?: ScaleParams | undefined): TransitionConfig;
transition:scale={params}
in:scale={params}
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 startingduration
(number
, default 400) — milliseconds the transition lastseasing
(function
, defaultcubicOut
) — an easing functionstart
(number
, default 0) - the scale value to animate out to and in fromopacity
(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}
drawpermalink
ts
function draw(node: SVGElement & {getTotalLength(): number;},{delay,speed,duration,easing}?: DrawParams | undefined): TransitionConfig;
transition:draw={params}
in:draw={params}
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 startingspeed
(number
, default undefined) - the speed of the animation, see below.duration
(number
|function
, default 800) — milliseconds the transition lastseasing
(function
, defaultcubicInOut
) — 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>
crossfadepermalink
ts
function crossfade({fallback,...defaults}: CrossfadeParams & {fallback?:| ((node: Element,params: CrossfadeParams,intro: boolean) => TransitionConfig)| undefined;}): [(node: any,params: CrossfadeParams & {key: any;}) => () => TransitionConfig,(node: any,params: CrossfadeParams & {key: any;}) => () => TransitionConfig];
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 startingduration
(number
|function
, default 800) — milliseconds the transition lastseasing
(function
, defaultcubicOut
) — an easing functionfallback
(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}
Typespermalink
BlurParamspermalink
ts
interface BlurParams {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
ts
amount?: number | string;
ts
opacity?: number;
CrossfadeParamspermalink
ts
interface CrossfadeParams {…}
ts
delay?: number;
ts
duration?: number | ((len: number) => number);
ts
easing?: EasingFunction;
DrawParamspermalink
ts
interface DrawParams {…}
ts
delay?: number;
ts
speed?: number;
ts
duration?: number | ((len: number) => number);
ts
easing?: EasingFunction;
EasingFunctionpermalink
ts
type EasingFunction = (t: number) => number;
FadeParamspermalink
ts
interface FadeParams {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
FlyParamspermalink
ts
interface FlyParams {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
ts
x?: number | string;
ts
y?: number | string;
ts
opacity?: number;
ScaleParamspermalink
ts
interface ScaleParams {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
ts
start?: number;
ts
opacity?: number;
SlideParamspermalink
ts
interface SlideParams {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
ts
axis?: 'x' | 'y';
TransitionConfigpermalink
ts
interface TransitionConfig {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: EasingFunction;
ts
css?: (t: number, u: number) => string;
ts
tick?: (t: number, u: number) => void;