crossfade

API reference for the crossfade transition pair in Svelte

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.

This is useful for creating smooth transitions between lists, such as a todo list where items move between “active” and “completed” states.

Usage

<script>
	import { crossfade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';

	const [send, receive] = crossfade({
		duration: 400,
		easing: quintOut
	});

	let todos = [
		{ id: 1, done: false, text: 'Learn Svelte' },
		{ id: 2, done: false, text: 'Build an app' }
	];
</script>

<div class="active">
	{#each todos.filter(t => !t.done) as todo (todo.id)}
		<div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
			{todo.text}
		</div>
	{/each}
</div>

<div class="done">
	{#each todos.filter(t => t.done) as todo (todo.id)}
		<div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
			{todo.text}
		</div>
	{/each}
</div>

Parameters

The crossfade function accepts a configuration object with the following parameters:

delay · number · default: "0"

Milliseconds before starting the transition

duration · number | function · default: "(d) => Math.sqrt(d) * 30"

Duration of the transition in milliseconds, or a function that takes the distance (in pixels) between the two elements and returns a duration

easing · function · default: "cubicOut"

An easing function that controls the animation curve

fallback · function

A transition to use when there is no matching element. Receives (node, params, intro) and should return a TransitionConfig

Return value

The crossfade function returns a tuple [send, receive] containing two transition functions. Each transition function is used with the in: and out: directives and requires a key parameter to match corresponding elements:

in:receive={{ key: someId }}
out:send={{ key: someId }}

Complete example

<script>
	import { crossfade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	import { fade } from 'svelte/transition';

	const [send, receive] = crossfade({
		duration: 300,
		easing: quintOut,
		// Fallback for elements without a counterpart
		fallback: (node, params) => fade(node, { duration: 200 })
	});

	let items = [
		{ id: 1, list: 'a', text: 'Item 1' },
		{ id: 2, list: 'a', text: 'Item 2' },
		{ id: 3, list: 'b', text: 'Item 3' }
	];

	function move(id, targetList) {
		items = items.map(item =>
			item.id === id ? { ...item, list: targetList } : item
		);
	}
</script>

<div class="lists">
	<div class="list">
		<h2>List A</h2>
		{#each items.filter(i => i.list === 'a') as item (item.id)}
			<div
				in:receive={{ key: item.id }}
				out:send={{ key: item.id }}
				on:click={() => move(item.id, 'b')}
			>
				{item.text}
			</div>
		{/each}
	</div>

	<div class="list">
		<h2>List B</h2>
		{#each items.filter(i => i.list === 'b') as item (item.id)}
			<div
				in:receive={{ key: item.id }}
				out:send={{ key: item.id }}
				on:click={() => move(item.id, 'a')}
			>
				{item.text}
			</div>
		{/each}
	</div>
</div>