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
为元素的不透明度设置动画,从 0 到当前不透明度(对于 in
转换)以及从当前不透明度到 0(对于 out
转换)。
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;