From f572d4611fff7f31b2f36d2204e760b2f8ebe80c Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Sun, 12 May 2019 10:13:52 +0100
Subject: [PATCH] Update animate example to use animate directive and built-in
 crossfade function.

---
 .../10-animations/00-animate/App.svelte       |  7 +-
 .../10-animations/00-animate/crossfade.js     | 65 -------------------
 2 files changed, 5 insertions(+), 67 deletions(-)
 delete mode 100644 site/content/examples/10-animations/00-animate/crossfade.js

diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
index c46096c204..3b9da92a27 100644
--- a/site/content/examples/10-animations/00-animate/App.svelte
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -1,8 +1,9 @@
 <script>
 	import { quintOut } from 'svelte/easing';
-	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+	import { crossfade } from 'svelte/transition'; 
+	import { flip } from 'svelte/animate';
 
-	const { send, receive } = crossfade({
+	const [ send, receive ] = crossfade({
 		fallback(node, params) {
 			const style = getComputedStyle(node);
 			const transform = style.transform === 'none' ? '' : style.transform;
@@ -122,6 +123,7 @@
 			<label
 				in:receive="{{key: todo.id}}"
 				out:send="{{key: todo.id}}"
+				animate:flip
 			>
 				<input type=checkbox bind:checked={todo.done}>
 				{todo.description}
@@ -136,6 +138,7 @@
 			<label
 				in:receive="{{key: todo.id}}"
 				out:send="{{key: todo.id}}"
+				animate:flip
 			>
 				<input type=checkbox bind:checked={todo.done}>
 				{todo.description}
diff --git a/site/content/examples/10-animations/00-animate/crossfade.js b/site/content/examples/10-animations/00-animate/crossfade.js
deleted file mode 100644
index e11e18b60e..0000000000
--- a/site/content/examples/10-animations/00-animate/crossfade.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { quintOut } from 'svelte/easing';
-
-export default function crossfade({ send, receive, fallback }) {
-	let requested = new Map();
-	let provided = new Map();
-
-	function crossfade(from, node) {
-		const to = node.getBoundingClientRect();
-		const dx = from.left - to.left;
-		const dy = from.top - to.top;
-
-		const style = getComputedStyle(node);
-		const transform = style.transform === 'none' ? '' : style.transform;
-
-		return {
-			duration: 400,
-			easing: quintOut,
-			css: (t, u) => `
-				opacity: ${t};
-				transform: ${transform} translate(${u * dx}px,${u * dy}px);
-			`
-		};
-	}
-
-	return {
-		send(node, params) {
-			provided.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (requested.has(params.key)) {
-					const { rect } = requested.get(params.key);
-					requested.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				// if the node is disappearing altogether
-				// (i.e. wasn't claimed by the other list)
-				// then we need to supply an outro
-				provided.delete(params.key);
-				return fallback(node, params);
-			};
-		},
-
-		receive(node, params) {
-			requested.set(params.key, {
-				rect: node.getBoundingClientRect()
-			});
-
-			return () => {
-				if (provided.has(params.key)) {
-					const { rect } = provided.get(params.key);
-					provided.delete(params.key);
-
-					return crossfade(rect, node);
-				}
-
-				requested.delete(params.key);
-				return fallback(node, params);
-			};
-		}
-	};
-}
\ No newline at end of file