Allow transitions to be local

Allows transitions to only run locally, skipping running when they are added to the DOM or removed from it.

Example:

```html
{#if visible}
{#each things as thing}
<div transition:fade|local></div>
{/each}
{/if}

<script>
export default {
  transitions: {
    fade(node, params) {
      return {
        duration: 400,
        css: t => {
          return `opacity: ${t}`;
        }
      };
    }
  }
};
</script>
```

In this example items in the each-block will fade in and fade out when they are added to or removed from `things` but the list will appear suddenly and disappear suddenly (no fade) when `visible` is toggled to `true` or `false`.

This is another try at #1480.

Author: jacwright

src/compile/dom/Block.ts

@@ -241,7 +241,7 @@ export default class Block {
 			properties.addBlock(`m: @noop,`);
 		} else {
 			properties.addBlock(deindent`
-				${dev ? 'm: function mount' : 'm'}(#target, anchor) {
+				${dev ? 'm: function mount' : 'm'}(#target, anchor${this.compiler.options.nestedTransitions && ', introing'}) {
 					${this.builders.mount}
 				},
 			`);
@@ -281,10 +281,10 @@ export default class Block {
 				properties.addBlock(`i: @noop,`);
 			} else {
 				properties.addBlock(deindent`
-					${dev ? 'i: function intro' : 'i'}(#target, anchor) {
+					${dev ? 'i: function intro' : 'i'}(#target, anchor${this.compiler.options.nestedTransitions && ', introing'}) {
 						if (#current) return;
 						${this.builders.intro}
-						this.m(#target, anchor);
+						this.m(#target, anchor${this.compiler.options.nestedTransitions && ', introing'});
 					},
 				`);
 			}
@@ -293,7 +293,7 @@ export default class Block {
 				properties.addBlock(`o: @run,`);
 			} else {
 				properties.addBlock(deindent`
-					${dev ? 'o: function outro' : 'o'}(#outrocallback) {
+					${dev ? 'o: function outro' : 'o'}(#outrocallback${this.compiler.options.nestedTransitions && ', outroing'}) {
 						if (!#current) return;
 
 						${this.outros > 1 && `#outrocallback = @callAfter(#outrocallback, ${this.outros});`}

src/compile/dom/index.ts

@@ -227,7 +227,7 @@ export default function dom(
 			this._fragment.c();
 			this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
 
-			if (options.target) this._mount(options.target, options.anchor);
+			if (options.target) this._mount(options.target, options.anchor${compiler.options.nestedTransitions && ', 1'});
 		` : deindent`
 			if (options.target) {
 				${compiler.options.hydratable
@@ -239,7 +239,7 @@ export default function dom(
 				${options.dev &&
 				`if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
 				this._fragment.c();`}
-				this._mount(options.target, options.anchor);
+				this._mount(options.target, options.anchor${compiler.options.nestedTransitions && ', 1'});
 
 				${(compiler.hasComponents || target.hasComplexBindings || hasInitHooks || target.hasIntroTransitions) &&
 				`@flush(this);`}

src/compile/nodes/AwaitBlock.ts

@@ -177,7 +177,7 @@ export default class AwaitBlock extends Node {
 				const ${countdown} = @callAfter(#outrocallback, 3);
 				for (let #i = 0; #i < 3; #i += 1) {
 					const block = ${info}.blocks[#i];
-					if (block) block.o(${countdown});
+					if (block) block.o(${countdown}, 1);
 					else ${countdown}();
 				}
 			`);

src/compile/nodes/Component.ts

@@ -386,7 +386,7 @@ export default class Component extends Node {
 
 			block.builders.mount.addBlock(deindent`
 				if (${name}) {
-					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
+					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}${compiler.options.nestedTransitions && ', introing'});
 					${this.ref && `#component.refs.${this.ref} = ${name};`}
 				}
 			`);
@@ -486,7 +486,7 @@ export default class Component extends Node {
 			}
 
 			block.builders.mount.addLine(
-				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
+				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}${compiler.options.nestedTransitions ? ', introing' : ''});`
 			);
 
 			if (updates.length) {
@@ -505,7 +505,7 @@ export default class Component extends Node {
 
 		if (this.compiler.options.nestedTransitions) {
 			block.builders.outro.addLine(
-				`if (${name}) ${name}._fragment.o(#outrocallback);`
+				`if (${name}) ${name}._fragment.o(#outrocallback, outroing);`
 			);
 		}
 	}

src/compile/nodes/EachBlock.ts

@@ -203,7 +203,7 @@ export default class EachBlock extends Node {
 
 			block.builders.mount.addBlock(deindent`
 				if (${each_block_else}) {
-					${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
+					${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null${this.compiler.options.nestedTransitions && ', 1'});
 				}
 			`);
 
@@ -310,12 +310,11 @@ export default class EachBlock extends Node {
 		}
 
 		block.builders.mount.addBlock(deindent`
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}${this.compiler.options.nestedTransitions ? ', 1' : ''});
 		`);
 
 		const dynamic = this.block.hasUpdateMethod;
 
-		const rects = block.getUniqueName('rects');
 		const destroy = this.block.hasAnimation
 			? `@fixAndOutroAndDestroyBlock`
 			: this.block.hasOutros
@@ -335,7 +334,7 @@ export default class EachBlock extends Node {
 			const countdown = block.getUniqueName('countdown');
 			block.builders.outro.addBlock(deindent`
 				const ${countdown} = @callAfter(#outrocallback, ${blocks}.length);
-				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown});
+				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown}, 1);
 			`);
 		}
 
@@ -385,7 +384,7 @@ export default class EachBlock extends Node {
 
 		block.builders.mount.addBlock(deindent`
 			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-				${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
+				${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}${this.compiler.options.nestedTransitions && ', 1'});
 			}
 		`);
 
@@ -397,16 +396,17 @@ export default class EachBlock extends Node {
 
 		const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock')
 		if (outroBlock) {
+			const outroArg = this.compiler.options.nestedTransitions ? ', outroing' : '';
 			block.builders.init.addBlock(deindent`
-				function ${outroBlock}(i, detach, fn) {
+				function ${outroBlock}(i, detach, fn${outroArg}) {
 					if (${iterations}[i]) {
 						${iterations}[i].o(() => {
 							if (detach) {
 								${iterations}[i].d(detach);
 								${iterations}[i] = null;
 							}
 							if (fn) fn();
-						});
+						}${outroArg});
 					}
 				}
 			`);
@@ -451,7 +451,7 @@ export default class EachBlock extends Node {
 			if (this.block.hasOutros) {
 				destroy = deindent`
 					@groupOutros();
-					for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1);
+					for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1${this.compiler.options.nestedTransitions && ', null, 1'});
 				`;
 			} else {
 				destroy = deindent`
@@ -482,7 +482,7 @@ export default class EachBlock extends Node {
 			block.builders.outro.addBlock(deindent`
 				${iterations} = ${iterations}.filter(Boolean);
 				const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
-				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
+				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown}${this.compiler.options.nestedTransitions && ', 1'});`
 			);
 		}
 

src/compile/nodes/Element.ts

@@ -745,32 +745,35 @@ export default class Element extends Node {
 		const { intro, outro } = this;
 
 		if (!intro && !outro) return;
+		const nested = this.compiler.options.nestedTransitions;
 
 		if (intro === outro) {
+			const [transitionName, ...pipes] = intro.name.split('|');
+			const local = ~pipes.indexOf('local') && 1;
 			const name = block.getUniqueName(`${this.var}_transition`);
 			const snippet = intro.expression
 				? intro.expression.snippet
 				: '{}';
 
 			block.addVariable(name);
 
-			const fn = `%transitions-${intro.name}`;
+			const fn = `%transitions-${transitionName}`;
 
 			block.builders.intro.addConditional(`#component.root._intro`, deindent`
 				if (${name}) ${name}.invalidate();
 
 				#component.root._aftercreate.push(() => {
-					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
-					${name}.run(1);
+					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, 1${nested && `, ${local}`});
+					${name}.run(1${nested && ', null, introing'});
 				});
 			`);
 
 			block.builders.outro.addBlock(deindent`
-				if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
+				if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, 0${nested && `, ${local}`});
 				${name}.run(0, () => {
 					#outrocallback();
 					${name} = null;
-				});
+				}${nested && ', outroing'});
 			`);
 
 			block.builders.destroy.addConditional('detach', `if (${name}) ${name}.abort();`);
@@ -780,11 +783,13 @@ export default class Element extends Node {
 
 			if (intro) {
 				block.addVariable(introName);
+				const [transitionName, ...pipes] = intro.name.split('|');
+				const local = ~pipes.indexOf('local') && 1;
 				const snippet = intro.expression
 					? intro.expression.snippet
 					: '{}';
 
-				const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
+				const fn = `%transitions-${transitionName}`; // TODO add built-in transitions?
 
 				if (outro) {
 					block.builders.intro.addBlock(deindent`
@@ -795,19 +800,21 @@ export default class Element extends Node {
 
 				block.builders.intro.addConditional(`#component.root._intro`, deindent`
 					#component.root._aftercreate.push(() => {
-						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
-						${introName}.run(1);
+						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, 1${nested && `, ${local}`});
+						${introName}.run(1${nested && ', null, introing'});
 					});
 				`);
 			}
 
 			if (outro) {
 				block.addVariable(outroName);
+				const [transitionName, ...pipes] = outro.name.split('|');
+				const local = ~pipes.indexOf('local') && 1;
 				const snippet = outro.expression
 					? outro.expression.snippet
 					: '{}';
 
-				const fn = `%transitions-${outro.name}`;
+				const fn = `%transitions-${transitionName}`;
 
 				block.builders.intro.addBlock(deindent`
 					if (${outroName}) ${outroName}.abort(1);
@@ -816,8 +823,8 @@ export default class Element extends Node {
 				// 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`
-					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
-					${outroName}.run(0, #outrocallback);
+					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, 0${nested && `, ${local}`});
+					${outroName}.run(0, #outrocallback${nested && ', outroing'});
 				`);
 
 				block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.abort();`);

src/compile/nodes/IfBlock.ts

@@ -140,7 +140,7 @@ export default class IfBlock extends Node {
 
 				if (this.compiler.options.nestedTransitions) {
 					block.builders.outro.addBlock(deindent`
-						if (${name}) ${name}.o(#outrocallback);
+						if (${name}) ${name}.o(#outrocallback, 1);
 						else #outrocallback();
 					`);
 				}
@@ -152,7 +152,7 @@ export default class IfBlock extends Node {
 
 			if (hasOutros && this.compiler.options.nestedTransitions) {
 				block.builders.outro.addBlock(deindent`
-					if (${name}) ${name}.o(#outrocallback);
+					if (${name}) ${name}.o(#outrocallback, 1);
 					else #outrocallback();
 				`);
 			}
@@ -206,7 +206,7 @@ export default class IfBlock extends Node {
 		const initialMountNode = parentNode || '#target';
 		const anchorNode = parentNode ? 'null' : 'anchor';
 		block.builders.mount.addLine(
-			`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
+			`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode}${this.compiler.options.nestedTransitions ? ', 1' : ''});`
 		);
 
 		const updateMountNode = this.getUpdateMountNode(anchor);
@@ -292,7 +292,7 @@ export default class IfBlock extends Node {
 		const anchorNode = parentNode ? 'null' : 'anchor';
 
 		block.builders.mount.addLine(
-			`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
+			`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode}${this.compiler.options.nestedTransitions ? ', 1' : ''});`
 		);
 
 		const updateMountNode = this.getUpdateMountNode(anchor);
@@ -374,7 +374,7 @@ export default class IfBlock extends Node {
 		const anchorNode = parentNode ? 'null' : 'anchor';
 
 		block.builders.mount.addLine(
-			`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
+			`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode}${this.compiler.options.nestedTransitions ? ', 1' : ''});`
 		);
 
 		const updateMountNode = this.getUpdateMountNode(anchor);

src/shared/index.js

@@ -147,8 +147,8 @@ export function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-export function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+export function _mount(target, anchor, introing) {
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null, introing);
 }
 
 export var PENDING = {};

src/shared/transitions.js

@@ -26,7 +26,7 @@ export function hash(str) {
 	return hash >>> 0;
 }
 
-export function wrapTransition(component, node, fn, params, intro) {
+export function wrapTransition(component, node, fn, params, intro, local) {
 	let obj = fn.call(component, node, params);
 	let duration;
 	let ease;
@@ -40,28 +40,34 @@ export function wrapTransition(component, node, fn, params, intro) {
 		program: null,
 		pending: null,
 
-		run(b, callback) {
+		run(b, callback, introOutro) {
 			if (typeof obj === 'function') {
 				transitionManager.wait().then(() => {
 					obj = obj();
-					this._run(b, callback);
+					this._run(b, callback, introOutro);
 				});
 			} else {
-				this._run(b, callback);
+				this._run(b, callback, introOutro);
 			}
 		},
 
-		_run(b, callback) {
+		_run(b, callback, introOutro) {
 			duration = obj.duration || 300;
 			ease = obj.easing || linear;
 
+			if (introOutro && local) {
+				this.t = b;
+				if (callback) callback();
+				return;
+			}
+
 			const program = {
 				start: window.performance.now() + (obj.delay || 0),
 				b,
 				callback: callback || noop
 			};
 
-			if (intro && !initialised) {
+			if (b && !initialised) {
 				if (obj.css && obj.delay) {
 					cssText = node.style.cssText;
 					node.style.cssText += obj.css(0, 1);

src/validate/html/validateElement.ts

@@ -85,11 +85,11 @@ export default function validateElement(
 		if (attribute.type === 'Ref') {
 			if (!isValidIdentifier(attribute.name)) {
 				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
-				
+
 				validator.error(attribute, {
 					code: `invalid-reference-name`,
 					message: `Reference name '${attribute.name}' is invalid — must be a valid identifier such as ${suggestion}`
-				});	
+				});
 			} else {
 				if (!refs.has(attribute.name)) refs.set(attribute.name, []);
 				refs.get(attribute.name).push(node);
@@ -213,7 +213,7 @@ export default function validateElement(
 			validator.used.events.add(attribute.name);
 			validateEventHandler(validator, attribute, refCallees);
 		} else if (attribute.type === 'Transition') {
-			validator.used.transitions.add(attribute.name);
+			validator.used.transitions.add(attribute.name.split('|')[0]);
 
 			const bidi = attribute.intro && attribute.outro;
 
@@ -249,7 +249,7 @@ export default function validateElement(
 			if (attribute.outro) hasOutro = true;
 			if (bidi) hasTransition = true;
 
-			if (!validator.transitions.has(attribute.name)) {
+			if (!validator.transitions.has(attribute.name.split('|')[0])) {
 				validator.error(attribute, {
 					code: `missing-transition`,
 					message: `Missing transition '${attribute.name}'`