abort outros when necessary, even without intros - fixes #1425

src/compile/dom/Block.ts

@@ -232,7 +232,7 @@ export default class Block {
 			}
 		}
 
-		if (this.hasIntroMethod) {
+		if (this.hasIntroMethod || this.hasOutroMethod) {
 			if (hasIntros) {
 				properties.addBlock(deindent`
 					${dev ? 'i: function intro' : 'i'}(#target, anchor) {
@@ -252,9 +252,7 @@ export default class Block {
 					},
 				`);
 			}
-		}
 
-		if (this.hasOutroMethod) {
 			if (hasOutros) {
 				properties.addBlock(deindent`
 					${dev ? 'o: function outro' : 'o'}(#outrocallback) {

src/compile/nodes/Element.ts

@@ -753,6 +753,10 @@ export default class Element extends Node {
 
 				const fn = `%transitions-${outro.name}`;
 
+				block.builders.intro.addBlock(deindent`
+					if (${outroName}) ${outroName}.abort();
+				`);
+
 				// TODO hide elements that have outro'd (unless they belong to a still-outroing
 				// group) prior to their removal from the DOM
 				block.builders.outro.addBlock(deindent`

src/compile/nodes/IfBlock.ts

@@ -366,7 +366,7 @@ export default class IfBlock extends Node {
 		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const enter = dynamic
-			? branch.hasIntroMethod
+			? (branch.hasIntroMethod || branch.hasOutroMethod)
 				? deindent`
 					if (${name}) {
 						${name}.p(changed, ctx);
@@ -386,7 +386,7 @@ export default class IfBlock extends Node {
 						${name}.m(${updateMountNode}, ${anchor});
 					}
 				`
-			: branch.hasIntroMethod
+			: (branch.hasIntroMethod || branch.hasOutroMethod)
 				? deindent`
 					if (!${name}) {
 						${name} = ${branch.block}(#component, ctx);

test/runtime/samples/transition-js-aborted-outro/_config.js

@@ -0,0 +1,24 @@
+export default {
+	data: {
+		visible: true,
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ visible: false });
+		const span = target.querySelector('span');
+
+		raf.tick(50);
+		assert.equal(span.foo, 0.5);
+
+		component.set({ visible: true });
+		assert.equal(span.foo, 1);
+
+		raf.tick(75);
+		assert.equal(span.foo, 1);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, `
+			<span>hello</span>
+		`);
+	},
+};

test/runtime/samples/transition-js-aborted-outro/main.html

@@ -0,0 +1,18 @@
+{#if visible}
+	<span out:foo>hello</span>
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>