SvelteReference

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): TransitionConfigAnimates 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 &#x3C;path> and &#x3C;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';

模糊

动画元素的不透明度同时应用一个模糊滤镜。

function blur(
	node: Element,
	{
		delay,
		duration,
		easing,
		amount,
		opacity
	}?: BlurParams | undefined
): TransitionConfig;

渐变

The crossfade 函数创建了一对名为 send 和 receive 的转换。当一个元素被 ‘sent’ 时，它会寻找一个对应的正在 ‘received’ 的元素，并生成一个将元素转换到对应元素位置并淡出的转换。当一个元素被 ‘received’ 时，发生相反的情况。如果没有对应元素，则使用 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
];

繪製

动画化 SVG 元素的描边，就像管子里的蛇。`in` 过渡从不可见路径开始，随着时间的推移在屏幕上绘制路径。`out` 过渡从可见状态开始，逐渐擦除路径。`draw` 只与具有 `getTotalLength` 方法的元素一起使用，如 `<path>` 和 `<polyline>`。

function draw(
	node: SVGElement & {
		getTotalLength(): number;
	},
	{
		delay,
		speed,
		duration,
		easing
	}?: DrawParams | undefined
): TransitionConfig;

淡化

动画元素的不透明度从 0 到当前不透明度，用于in过渡，以及从当前不透明度到 0，用于out过渡。

function fade(
	node: Element,
	{ delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;

飞

动画元素的水平位置和垂直位置以及不透明度。`in` 过渡从提供的值（作为参数传递给元素的默认值）动画。`out` 过渡从元素的默认值动画到提供的值。

function fly(
	node: Element,
	{
		delay,
		duration,
		easing,
		x,
		y,
		opacity
	}?: FlyParams | undefined
): TransitionConfig;

比例

动画元素的不透明度和缩放。`in` 过渡将动画从提供的参数值过渡到元素的当前（默认）值。`out` 过渡将动画从元素的默认值过渡到提供的值。

function scale(
	node: Element,
	{
		delay,
		duration,
		easing,
		start,
		opacity
	}?: ScaleParams | undefined
): TransitionConfig;

幻灯片

滑动元素进出。

function slide(
	node: Element,
	{
		delay,
		duration,
		easing,
		axis
	}?: SlideParams | undefined
): TransitionConfig;

模糊参数

接口 BlurParams {/*…*/}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

数量?: 数字 | 字符串;

不透明度?: 数字;

交叉淡入淡出参数

interface CrossfadeParams {…}

延迟?: number;

duration?: number | ((len: number) => number);

是否使用缓动函数?: EasingFunction;

绘图参数

DrawParams 接口 {/*…*/}

延迟?: number;

speed?: 数字；

duration?: number | ((len: number) => number);

是否使用缓动函数?: EasingFunction;

EasingFunction

type EasingFunction = (t: number) => number;

FadeParams

接口 FadeParams {/*…*/}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

飞参

接口 FlyParams {/*…*/}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

x?: 数字 | 字符串;

y?: 数字 | 字符串;

不透明度?: 数字;

缩放参数

interface ScaleParams {…}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

start?: 数字；

不透明度?: 数字;

幻灯片参数

interface SlideParams {…}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

axis?: 'x' | 'y';

过渡配置

interface TransitionConfig {…}

延迟?: number;

持续时间?: 数字;

是否使用缓动函数?: EasingFunction;

css?: (t: number, u: number) => string;

tick?: (t: number, u: number) => void;

Edit this page on GitHub llms.txt

previous next

svelte/store Compiler errors