Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://svelte.dev/docs/svelte/svelte-transition below:

svelte/transition • Docs • Svelte

import {
	blur,
	crossfade,
	draw,
	fade,
	fly,
	scale,
	slide
} from 'svelte/transition';

Animates a blur filter alongside an element’s opacity.

function blur(
	node: Element,
	{
		delay,
		duration,
		easing,
		amount,
		opacity
	}?: BlurParams | undefined
): 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.

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
];

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>.

function draw(
	node: SVGElement & {
		getTotalLength(): number;
	},
	{
		delay,
		speed,
		duration,
		easing
	}?: DrawParams | 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.

function fade(
	node: Element,
	{ delay, duration, easing }?: FadeParams | 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.

function fly(
	node: Element,
	{
		delay,
		duration,
		easing,
		x,
		y,
		opacity
	}?: FlyParams | 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.

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

Slides an element in and out.

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

amount?: number | string;

interface CrossfadeParams {…}

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

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

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

interface ScaleParams {…}

interface SlideParams {…}

interface TransitionConfig {…}

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4