broken snapshot

src/compile/render-dom/wrappers/Element/index.ts

@@ -604,7 +604,7 @@ export default class ElementWrapper extends Wrapper {
 				${name}.run(0);
 			`);
 
-			block.builders.destroy.addConditional('detach', `if (${name}) ${name}.end();`);
+			block.builders.destroy.addConditional('detach', `if (${name}) console.log('detaching'), ${name}.end();`);
 		}
 
 		else {
@@ -622,15 +622,18 @@ export default class ElementWrapper extends Wrapper {
 				if (outro) {
 					block.builders.intro.addBlock(deindent`
 						@add_render_callback(() => {
-							if (${introName}) ${introName}.end();
-							${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+							if (!${introName}) ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+							${introName}.start();
 						});
 					`);
+
+					block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate()`);
 				} else {
 					block.builders.intro.addBlock(deindent`
 						if (!${introName}) {
 							@add_render_callback(() => {
 								${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+								${introName}.start();
 							});
 						}
 					`);

src/compile/render-dom/wrappers/IfBlock.ts

@@ -431,6 +431,7 @@ export default class IfBlockWrapper extends Wrapper {
 			? deindent`
 				@group_outros();
 				@on_outro(() => {
+					console.log('outros completed');
 					${name}.d(1);
 					${name} = null;
 				});

src/internal/transitions.js

@@ -18,6 +18,7 @@ function wait() {
 let outros;
 
 export function group_outros() {
+	console.log('grouping');
 	outros = {
 		remaining: 0,
 		callbacks: []
@@ -25,19 +26,23 @@ export function group_outros() {
 }
 
 export function check_outros() {
+	console.trace(`${outros.remaining} outros remaining`);
 	if (!outros.remaining) {
+		console.log(outros.callbacks.map(c => c.toString()))
 		run_all(outros.callbacks);
 	}
 }
 
 export function on_outro(callback) {
+	console.log('adding', callback.toString());
 	outros.callbacks.push(callback);
 }
 
 export function create_in_transition(node, fn, params) {
 	let config = fn(node, params);
-	let running = true;
+	let running = false;
 	let animation_name;
+	let task;
 
 	function cleanup() {
 		if (animation_name) delete_rule(node, animation_name);
@@ -62,7 +67,10 @@ export function create_in_transition(node, fn, params) {
 		const start_time = window.performance.now() + delay;
 		const end_time = start_time + duration;
 
-		loop(now => {
+		if (task) task.abort();
+		running = true;
+
+		task = loop(now => {
 			if (running) {
 				if (now >= end_time) {
 					tick(1, 0);
@@ -80,14 +88,24 @@ export function create_in_transition(node, fn, params) {
 		});
 	}
 
+	let started = false;
+
+	return {
+		start() {
+			if (started) return;
+
 			if (typeof config === 'function') {
 				config = config();
 				wait().then(go);
 			} else {
 				go();
 			}
+		},
+
+		invalidate() {
+			started = false;
+		},
 
-	return {
 		end() {
 			if (running) {
 				cleanup();
@@ -233,6 +251,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 			node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`));
 
 			loop(now => {
+				console.log({ now, pending_program, running_program });
 				if (pending_program && now > pending_program.start) {
 					running_program = init(pending_program, duration);
 					pending_program = null;
@@ -263,6 +282,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 							}
 						}
 
+						console.log('running program ended');
 						running_program = null;
 					}
 
@@ -280,6 +300,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 
 	return {
 		run(b) {
+			console.log(`run`, b);
 			if (typeof config === 'function') {
 				wait().then(() => {
 					config = config();
@@ -291,6 +312,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
 		},
 
 		end() {
+			console.log('end');
 			clear_animation();
 			running_program = pending_program = null;
 		}

test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js

@@ -16,11 +16,15 @@ export default {
 		assert.equal(div.foo, 0.75);
 		assert.htmlEqual(div.innerHTML, 'hello everybody!');
 
+		console.group('set visible false');
 		component.visible = false;
+		console.groupEnd();
 		component.name = 'again';
 		assert.htmlEqual(div.innerHTML, 'hello everybody!');
 
+		console.group('tick 125');
 		raf.tick(125);
+		console.groupEnd();
 		assert.equal(div.foo, 0.25);
 
 		component.visible = true;