implement js transitions, albeit messily

src/compile/nodes/EachBlock.ts

@@ -318,11 +318,9 @@ export default class EachBlock extends Node {
 			const ${this.each_block_value} = ${snippet};
 
 			${this.block.hasOutroMethod && `@transitionManager.groupOutros();`}
-			${this.block.animation && `const before = @measure(${blocks});`}
+			${this.block.animation && `const rects = @measure(${blocks});`}
 			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
-			${this.block.animation && `const after = @measure(${blocks});`}
+			${this.block.animation && `@animate(${blocks}, rects, %animations-${this.children[0].animation.name}, {});`}
-
-			console.log({ before, after });
 		`);
 
 		if (this.compiler.options.nestedTransitions) {

src/shared/keyed-each.js

@@ -1,3 +1,5 @@
+import { transitionManager, linear } from './transitions';
+
 export function destroyBlock(block, lookup) {
 	block.d(1);
 	lookup[block.key] = null;
@@ -103,3 +105,52 @@ export function measure(blocks) {
 	while (i--) measurements[blocks[i].key] = blocks[i].node.getBoundingClientRect();
 	return measurements;
 }
+
+export function animate(blocks, rects, fn, params) {
+	let i = blocks.length;
+	while (i--) {
+		const block = blocks[i];
+		const from = rects[block.key];
+
+		if (!from) continue;
+
+		const to = block.node.getBoundingClientRect();
+		const info = fn(block.node, { from, to }, params);
+
+		const duration = 'duration' in info ? info.duration : 300;
+		const delay = 'delay' in info ? info.delay : 0;
+		const ease = info.easing || linear;
+		const start = window.performance.now() + delay;
+		const end = start + duration;
+
+		const program = {
+			a: 0,
+			t: 0,
+			b: 1,
+			delta: 1,
+			duration,
+			start,
+			end
+		};
+
+		const animation = {
+			pending: delay ? program : null,
+			program: delay ? null : program,
+			running: !delay,
+
+			update: now => {
+				const p = now - program.start;
+				const t = program.a + program.delta * ease(p / program.duration);
+				if (info.tick) info.tick(t, 1 - t);
+			},
+
+			done() {
+				// TODO remove styles
+			}
+		};
+
+		transitionManager.add(animation);
+
+		if (info.tick) info.tick(0, 1);
+	}
+}

test/runtime/samples/animation/main.html

@@ -6,8 +6,8 @@
 	export default {
 		animations: {
 			flip(node, animation, params) {
-				const dx = animation.to.left - animation.from.left;
+				const dx = animation.from.left - animation.to.left;
-				const dy = animation.to.top - animation.from.top;
+				const dy = animation.from.top - animation.to.top;
 
 				return {
 					duration: 100,