svelte/transition
import { function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfigAnimates 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): TransitionConfigAnimates 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): TransitionConfigAnimates 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): TransitionConfigAnimates 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): TransitionConfigSlides 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 的 transitions。当一个元素被“发送”时,它会寻找一个正在“接收”的对应元素,并生成一个使该元素转换到其对应元素位置并淡出的过渡效果。当一个元素被“接收”时,则发生相反的过程。如果没有对应元素,则使用 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;