start simplifying animations

src/internal/animations.js

@@ -13,8 +13,8 @@ export function wrapAnimation(node, from, fn, 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 start_time = window.performance.now() + delay;
-	const end = start + duration;
+	const end = start_time + duration;
 
 	const program = {
 		a: 0,
@@ -22,66 +22,59 @@ export function wrapAnimation(node, from, fn, params) {
 		b: 1,
 		delta: 1,
 		duration,
-		start,
+		start: start_time,
 		end
 	};
 
 	const cssText = node.style.cssText;
 
-	const animation = {
+	function start() {
-		pending: delay ? program : null,
+		if (info.css) {
-		program: delay ? null : program,
+			if (delay) node.style.cssText = cssText;
-		running: true,
 
-		start() {
+			program.name = create_rule(program, ease, info.css);
-			if (info.css) {
-				if (delay) node.style.cssText = cssText;
 
-				program.name = create_rule(program, ease, info.css);
+			node.style.animation = (node.style.animation || '')
-
+				.split(', ')
-				node.style.animation = (node.style.animation || '')
+				.filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim)))
-					.split(', ')
+				.concat(`${program.name} ${program.duration}ms linear 1 forwards`)
-					.filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim)))
+				.join(', ');
-					.concat(`${program.name} ${program.duration}ms linear 1 forwards`)
+		}
-					.join(', ');
-			}
 
-			animation.program = program;
+		running_program = program;
-			animation.pending = null;
+		pending_program = null;
-		},
+	}
 
-		update: now => {
+	let running = true;
-			const p = now - program.start;
+	let pending_program = delay ? program : null;
-			const t = program.a + program.delta * ease(p / program.duration);
+	let running_program = delay ? null : program;
-			if (info.tick) info.tick(t, 1 - t);
-		},
 
-		done() {
+	function stop() {
-			if (info.tick) info.tick(1, 0);
+		if (info.css) delete_rule(node, program.name);
-			animation.stop();
+		running = false;
-		},
+	}
 
-		stop() {
+	const { abort, promise } = loop(now => {
-			if (info.css) delete_rule(node, program.name);
+		if (pending_program && now >= pending_program.start) {
-			animation.running = false;
+			start();
 		}
-	};
-
-	const { abort, promise } = loop(() => {
-		const now = window.performance.now();
 
-		if (animation.program && now >= animation.program.end) {
+		if (running_program && now >= running_program.end) {
-			animation.done();
+			if (info.tick) info.tick(1, 0);
+			stop();
 		}
 
-		if (animation.pending && now >= animation.pending.start) {
+		if (!running) {
-			animation.start(animation.pending);
+			return false;
 		}
 
-		if (animation.running) {
+		if (running_program) {
-			animation.update(now);
+			const p = now - program.start;
-			return true;
+			const t = program.a + program.delta * ease(p / program.duration);
+			if (info.tick) info.tick(t, 1 - t);
 		}
+
+		return true;
 	});
 
 	if (info.tick) info.tick(0, 1);
@@ -89,10 +82,11 @@ export function wrapAnimation(node, from, fn, params) {
 	if (delay) {
 		if (info.css) node.style.cssText += info.css(0, 1);
 	} else {
-		animation.start();
+		start();
 	}
 
-	return animation;
+	// TODO just return the function
+	return { stop };
 }
 
 export function fixPosition(node) {

src/internal/loop.js

@@ -3,7 +3,7 @@ let running = false;
 
 function run_tasks() {
 	tasks.forEach(task => {
-		if (!task[0]()) {
+		if (!task[0](window.performance.now())) {
 			tasks.delete(task);
 			task[1]();
 		}

src/internal/transitions.js

@@ -61,9 +61,7 @@ export function wrapTransition(component, node, fn, params, intro) {
 			if (!this.running) {
 				this.running = true;
 
-				const { abort, promise } = loop(() => {
+				const { abort, promise } = loop(now => {
-					const now = window.performance.now();
-
 					if (this.program && now >= this.program.end) {
 						this.done();
 					}