svelte/transition
import {
function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfig
Animates a blur
filter alongside an element’s opacity.
blur,
function crossfade({ fallback, ...defaults }: CrossfadeParams & {
fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
}): [(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,
function draw(node: SVGElement & {
getTotalLength(): number;
}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfig
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,
function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfig
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,
function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig
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,
function scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfig
Animates the opacity and scale of an element. in
transitions animate from the provided values, passed as parameters, to an element’s current (default) values. out
transitions animate from an element’s default values to the provided values.
scale,
function slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfig
Slides an element in and out.
slide
} from 'svelte/transition';
blur
動畫處理元素的 blur
濾鏡以及不透明度。
function blur(
node: Element,
{
delay,
duration,
easing,
amount,
opacity
}?: BlurParams | undefined
): TransitionConfig;
crossfade
crossfade
函式建立一對稱為 send
和 receive
的轉場。當一個元素被「送出」時,它會尋找一個對應的被「接收」的元素,並產生一個轉場,將元素轉換到其對應元素的位置並使其淡出。當一個元素被「接收」時,則會發生相反的情況。如果沒有對應的元素,則會使用 fallback
轉場。
function crossfade({
fallback,
...defaults
}: CrossfadeParams & {
fallback?: (
node: Element,
params: CrossfadeParams,
intro: boolean
) => TransitionConfig;
}): [
(
node: any,
params: CrossfadeParams & {
key: any;
}
) => () => TransitionConfig,
(
node: any,
params: CrossfadeParams & {
key: any;
}
) => () => TransitionConfig
];
draw
動畫處理 SVG 元素的筆觸,就像管子裡的蛇一樣。in
轉場開始時路徑不可見,並隨著時間推移將路徑繪製到螢幕上。out
轉場則從可見狀態開始,並逐漸擦除路徑。draw
僅適用於具有 getTotalLength
方法的元素,例如 <path>
和 <polyline>
。
function draw(
node: SVGElement & {
getTotalLength(): number;
},
{
delay,
speed,
duration,
easing
}?: DrawParams | undefined
): TransitionConfig;
fade
動畫處理元素的不透明度,in
轉場從 0 到目前不透明度,而 out
轉場則從目前不透明度到 0。
function fade(
node: Element,
{ delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;
fly
動畫處理元素的 x 和 y 位置以及不透明度。in
轉場從提供的數值開始動畫,這些數值會作為參數傳遞到元素的預設值。out
轉場則從元素的預設值動畫到提供的數值。
function fly(
node: Element,
{
delay,
duration,
easing,
x,
y,
opacity
}?: FlyParams | undefined
): TransitionConfig;
scale
動畫處理元素的不透明度和縮放。in
轉場從提供的數值開始動畫,這些數值會作為參數傳遞到元素的目前(預設)值。out
轉場則從元素的預設值動畫到提供的數值。
function scale(
node: Element,
{
delay,
duration,
easing,
start,
opacity
}?: ScaleParams | undefined
): TransitionConfig;
slide
滑動元素進入和退出。
function slide(
node: Element,
{
delay,
duration,
easing,
axis
}?: SlideParams | undefined
): TransitionConfig;
BlurParams
interface BlurParams {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
amount?: number | string;
opacity?: number;
CrossfadeParams
interface CrossfadeParams {…}
delay?: number;
duration?: number | ((len: number) => number);
easing?: EasingFunction;
DrawParams
interface DrawParams {…}
delay?: number;
speed?: number;
duration?: number | ((len: number) => number);
easing?: EasingFunction;
EasingFunction
type EasingFunction = (t: number) => number;
FadeParams
interface FadeParams {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
FlyParams
interface FlyParams {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
x?: number | string;
y?: number | string;
opacity?: number;
ScaleParams
interface ScaleParams {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
start?: number;
opacity?: number;
SlideParams
interface SlideParams {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
axis?: 'x' | 'y';
TransitionConfig
interface TransitionConfig {…}
delay?: number;
duration?: number;
easing?: EasingFunction;
css?: (t: number, u: number) => string;
tick?: (t: number, u: number) => void;