Transitions

/**
 * Animates the opacity of an element from 0 to current opacity for in transitions
 * and from current opacity to 0 for out transitions
 * @param node - DOM element to animate
 * @param params - Fade parameters
 * @returns Transition configuration
 */
function fade(node: Element, params?: FadeParams): TransitionConfig;

interface FadeParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) */
  duration?: number;
  /** Easing function */
  easing?: EasingFunction;
}

interface TransitionConfig {
  delay?: number;
  duration?: number;
  easing?: EasingFunction;
  css?: (t: number, u: number) => string;
  tick?: (t: number, u: number) => void;
}

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

import { fade } from "svelte/transition";

// Basic fade
<div transition:fade>
  Content that fades in and out
</div>

// Custom fade parameters
<div transition:fade={{ duration: 1000, delay: 500 }}>
  Slow fade with delay
</div>

// Separate in/out transitions
<div in:fade={{ duration: 200 }} out:fade={{ duration: 800 }}>
  Quick fade in, slow fade out
</div>

/**
 * Animates x/y positions and opacity. In transitions animate from provided values
 * to element's default values. Out transitions animate from default to provided values.
 * @param node - DOM element to animate
 * @param params - Fly parameters
 * @returns Transition configuration
 */
function fly(node: Element, params?: FlyParams): TransitionConfig;

interface FlyParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) */
  duration?: number;
  /** Easing function */
  easing?: EasingFunction;
  /** Horizontal offset (px or string with unit) */
  x?: number | string;
  /** Vertical offset (px or string with unit) */
  y?: number | string;
  /** Target opacity (0-1) */
  opacity?: number;
}

import { fly } from "svelte/transition";
import { cubicOut } from "svelte/easing";

// Slide in from left
<div transition:fly={{ x: -200, duration: 300 }}>
  Slides from left
</div>

// Slide in from top with opacity
<div transition:fly={{ y: -100, opacity: 0, duration: 500, easing: cubicOut }}>
  Slides from top with fade
</div>

// Slide out to bottom right
<div out:fly={{ x: 200, y: 200, duration: 400 }}>
  Slides to bottom right on exit
</div>

// Using string units
<div transition:fly={{ x: '50%', y: '2rem' }}>
  Using relative units
</div>

/**
 * Slides an element in and out by animating height or width
 * @param node - DOM element to animate
 * @param params - Slide parameters
 * @returns Transition configuration
 */
function slide(node: Element, params?: SlideParams): TransitionConfig;

interface SlideParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) */
  duration?: number;
  /** Easing function */
  easing?: EasingFunction;
  /** Animation axis: 'x' or 'y' */
  axis?: 'x' | 'y';
}

import { slide } from "svelte/transition";

// Vertical slide (default)
<div transition:slide>
  Content that slides up/down
</div>

// Horizontal slide
<div transition:slide={{ axis: 'x', duration: 400 }}>
  Content that slides left/right
</div>

// Accordion panel
{#if isOpen}
  <div transition:slide={{ duration: 300 }}>
    <p>Accordion content that slides open and closed</p>
  </div>
{/if}

/**
 * Animates opacity and scale. In transitions animate from provided values to defaults.
 * Out transitions animate from defaults to provided values.
 * @param node - DOM element to animate
 * @param params - Scale parameters
 * @returns Transition configuration
 */
function scale(node: Element, params?: ScaleParams): TransitionConfig;

interface ScaleParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) */
  duration?: number;
  /** Easing function */
  easing?: EasingFunction;
  /** Starting scale value (0-1+) */
  start?: number;
  /** Target opacity (0-1) */
  opacity?: number;
}

import { scale } from "svelte/transition";

// Basic scale transition
<div transition:scale>
  Scales from/to center
</div>

// Custom scale parameters
<div transition:scale={{ start: 0.5, duration: 200 }}>
  Starts at 50% scale
</div>

// Modal popup effect
<div transition:scale={{ start: 0.8, opacity: 0, duration: 150 }}>
  Modal content
</div>

/**
 * Animates a blur filter alongside element opacity
 * @param node - DOM element to animate
 * @param params - Blur parameters
 * @returns Transition configuration
 */
function blur(node: Element, params?: BlurParams): TransitionConfig;

interface BlurParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) */
  duration?: number;
  /** Easing function */
  easing?: EasingFunction;
  /** Blur amount (number or string with unit) */
  amount?: number | string;
  /** Target opacity (0-1) */
  opacity?: number;
}

import { blur } from "svelte/transition";

// Basic blur transition
<div transition:blur>
  Content with blur effect
</div>

// Custom blur amount
<div transition:blur={{ amount: 10, duration: 400 }}>
  Heavy blur effect
</div>

// Blur with opacity
<div transition:blur={{ amount: '5px', opacity: 0.5 }}>
  Partial blur and fade
</div>

/**
 * Animates SVG element stroke like drawing. Only works with elements that have getTotalLength method.
 * In transitions draw from invisible to visible. Out transitions erase from visible to invisible.
 * @param node - SVG element with getTotalLength method
 * @param params - Draw parameters
 * @returns Transition configuration
 */
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;

interface DrawParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Drawing speed (units per ms) */
  speed?: number;
  /** Animation duration (ms) or function based on path length */
  duration?: number | ((len: number) => number);
  /** Easing function */
  easing?: EasingFunction;
}

import { draw } from "svelte/transition";

// Basic path drawing
<svg>
  <path d="M 10 10 L 100 100" transition:draw />
</svg>

// Custom drawing speed
<svg>
  <path d="M 10 10 C 50 5, 80 30, 100 50" transition:draw={{ speed: 2 }} />
</svg>

// Duration based on path length
<svg>
  <polyline 
    points="10,10 50,25 90,10 120,40" 
    transition:draw={{ duration: len => len * 5 }}
  />
</svg>

// Signature effect
<svg viewBox="0 0 400 200">
  <path 
    d="M 50 100 Q 100 50, 150 100 T 250 100 Q 300 80, 350 120"
    stroke="blue" 
    fill="none" 
    stroke-width="2"
    transition:draw={{ duration: 2000 }}
  />
</svg>

/**
 * Creates a pair of transitions for elements that transform into each other.
 * When an element is 'sent', it looks for a corresponding 'received' element.
 * @param params - Crossfade configuration with optional fallback
 * @returns Tuple of [send, receive] transition functions
 */
function crossfade(params: CrossfadeParams & {
  fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
}): [
  (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig,
  (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig
];

interface CrossfadeParams {
  /** Delay before animation starts (ms) */
  delay?: number;
  /** Animation duration (ms) or function based on distance */
  duration?: number | ((len: number) => number);
  /** Easing function */
  easing?: EasingFunction;
}

import { crossfade } from "svelte/transition";
import { quintOut } from "svelte/easing";

const [send, receive] = crossfade({
  duration: d => Math.sqrt(d * 200),
  fallback(node, params) {
    const style = getComputedStyle(node);
    const transform = style.transform === 'none' ? '' : style.transform;
    
    return {
      duration: 600,
      easing: quintOut,
      css: t => `
        transform: ${transform} scale(${t});
        opacity: ${t}
      `
    };
  }
});

// Todo list with crossfade between states
{#each todos as todo (todo.id)}
  {#if todo.done}
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
      ✓ {todo.text}
    </div>
  {:else}
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
      ○ {todo.text}
    </div>
  {/if}
{/each}

/**
 * Custom transition function signature
 * @param node - DOM element being transitioned
 * @param params - Transition parameters
 * @returns Transition configuration
 */
type TransitionFunction = (node: Element, params?: any) => TransitionConfig;

// Typewriter effect
function typewriter(node, { speed = 1 }) {
  const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
  
  if (!valid) {
    throw new Error('Typewriter transition only works on elements with a single text node child');
  }
  
  const text = node.textContent;
  const duration = text.length / (speed * 0.01);
  
  return {
    duration,
    tick: t => {
      const i = Math.trunc(text.length * t);
      node.textContent = text.slice(0, i);
    }
  };
}

// Spin transition
function spin(node, { duration = 1000 }) {
  return {
    duration,
    css: t => {
      const eased = cubicInOut(t);
      return `
        transform: scale(${eased}) rotate(${eased * 1080}deg);
        opacity: ${eased}
      `;
    }
  };
}

// Usage in template
<p transition:typewriter={{ speed: 2 }}>
  This text will be typed out
</p>

<div transition:spin={{ duration: 500 }}>
  Spinning content
</div>

import { fade, fly, scale } from "svelte/transition";

// Staggered list animations
{#each items as item, i (item.id)}
  <div transition:fly={{ y: 50, delay: i * 100 }}>
    {item.name}
  </div>
{/each}

// Layered effects
<div class="modal-backdrop" transition:fade>
  <div class="modal" transition:scale={{ start: 0.9 }}>
    <div class="modal-content" transition:fly={{ y: -50, delay: 150 }}>
      Modal content
    </div>
  </div>
</div>