From f797482e27b8f2d53b33ac6814c4ae26d225d760 Mon Sep 17 00:00:00 2001
From: Ophir LOJKINE <pere.jobs@gmail.com>
Date: Sun, 27 Jun 2021 18:01:26 +0200
Subject: [PATCH] Add documentation for crossfade (#6196)

---
 site/content/docs/03-run-time.md | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index c0bd145316..83b6fa9b8e 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -752,7 +752,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicInOut`) — an [easing function](docs#svelte_easing)
 
-The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
+The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
 
 ```sv
 <script>
@@ -775,8 +775,36 @@ The `speed` parameter is a means of setting the duration of the transition relat
 ```
 
 
-<!-- Crossfade is coming soon... -->
+#### `crossfade`
 
+The `crossfade` function creates a pair of [transitions](docs#transition_fn) 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.
+
+---
+
+`crossfade` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicOut`) — an [easing function](docs#svelte_easing)
+* `fallback` (`function`) — A fallback [transition](docs#transition_fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
+
+```sv
+<script>
+	import { crossfade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	const [send, receive] = crossfade({
+		duration:1500,
+		easing: quintOut
+	});
+</script>
+
+{#if condition}
+	<h1 in:send={{key}} out:receive={{key}}>BIG ELEM</h1>
+{:else}
+	<small in:send={{key}} out:receive={{key}}>small elem</small>
+{/if}
+```
 
 
 ### `svelte/animate`