Transition

import {
  blur,
  fade,
  fly,
  slide
  scale,
  draw,
} from 'solivelte';

blur

Animates a blur filter alongside an element’s opacity.

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

fade

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
): TransitionConfig;

fly

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
): TransitionConfig;

slide

Slides an element in and out.

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

scale

Animates the opacity and scale of an element. in transitions animate from an element’s current (default) values to the provided values, passed as parameters. out transitions animate from the provided values to an element’s default values.

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

draw

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
): TransitionConfig;

BlurParams

interface BlurParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

amount?: number | string;

opacity?: 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;

SlideParams

interface SlideParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

axis?: 'x' | 'y';

ScaleParams

interface ScaleParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

start?: number;

opacity?: number;

DrawParams

interface DrawParams {…}

delay?: number;

speed?: number;

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

easing?: EasingFunction;

EasingFunction

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

TransitionConfig

interface TransitionConfig {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

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

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