blur() — svelte Function Reference

Architecture documentation for the blur() function in index.js from the svelte codebase.

Function javascript AnimationLibrary Transitions calls 1

Entity Profile

AnimationLibrary→ Transitions→ blur() — svelte Function Reference

Dependency Diagram

graph TD
  167c3f15_018c_2742_ff4b_f7dff6348754["blur()"]
  8795a504_2189_bf07_fb96_096bc8c92d25["index.js"]
  167c3f15_018c_2742_ff4b_f7dff6348754 -->|defined in| 8795a504_2189_bf07_fb96_096bc8c92d25
  489df91f_524a_a032_194d_cf9e45c790d7["split_css_unit()"]
  167c3f15_018c_2742_ff4b_f7dff6348754 -->|calls| 489df91f_524a_a032_194d_cf9e45c790d7
  style 167c3f15_018c_2742_ff4b_f7dff6348754 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/transition/index.js lines 38–53

export function blur(
	node,
	{ delay = 0, duration = 400, easing = cubic_in_out, amount = 5, opacity = 0 } = {}
) {
	const style = getComputedStyle(node);
	const target_opacity = +style.opacity;
	const f = style.filter === 'none' ? '' : style.filter;
	const od = target_opacity * (1 - opacity);
	const [value, unit] = split_css_unit(amount);
	return {
		delay,
		duration,
		easing,
		css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
	};
}