Fix race condition for if block

src/compile/dom/Block.ts

@@ -169,9 +169,11 @@ export default class Block {
 
 	toString() {
 		const { dev } = this.compiler.options;
+		const properties = new CodeBuilder();
 
 		if (this.hasIntroMethod || this.hasOutroMethod) {
 			this.addVariable('#current');
+			properties.addBlock(`cr(){ return #current; },`);
 
 			if (!this.builders.mount.isEmpty()) {
 				this.builders.mount.addLine(`#current = true;`);
@@ -186,8 +188,6 @@ export default class Block {
 			this.builders.mount.addLine(`${this.autofocus}.focus();`);
 		}
 
-		const properties = new CodeBuilder();
-
 		let localKey;
 		if (this.key) {
 			localKey = this.getUniqueName('key');

src/compile/nodes/IfBlock.ts

@@ -301,7 +301,7 @@ export default class IfBlock extends Node {
 		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const destroyOldBlock = deindent`
-			@groupOutros();
+			if(${name}.cr()) @groupOutros();
 			${name}.o(function() {
 				${if_blocks}[${previous_block_index}].d(1);
 				${if_blocks}[${previous_block_index}] = null;
@@ -423,7 +423,7 @@ export default class IfBlock extends Node {
 		// as that will typically result in glitching
 		const exit = branch.hasOutroMethod
 			? deindent`
-				@groupOutros();
+				if(${name}.cr()) @groupOutros();
 				${name}.o(function() {
 					${name}.d(1);
 					${name} = null;

test/runtime/samples/transition-js-if-block-outro-timeout/_config.js

@@ -0,0 +1,22 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		component.set({ visible: true });
+		const div = target.querySelector('div');
+
+		component.set({ visible: false });
+		assert.equal(window.getComputedStyle(div).opacity, 1);
+
+		raf.tick(200);
+		assert.equal(window.getComputedStyle(div).opacity, 0.5);
+		component.set({ blabla: false });
+
+		raf.tick(400);
+		assert.equal(window.getComputedStyle(div).opacity, 0);
+
+		raf.tick(600);
+		assert.equal(component.refs.div, undefined);
+		assert.equal(target.querySelector('div'), undefined);
+
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-block-outro-timeout/main.html

@@ -0,0 +1,18 @@
+{#if visible}
+	<div out:fade style="opacity: 1;" ref:div>yes</div>
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			fade: function ( node, params ) {
+				return {
+					duration: 400,
+					tick: t => {
+						node.style.opacity = t;
+					}
+				};
+			}
+		}
+	};
+</script>