feat: Add options w/ direction to transitions

Closes sveltejs#3918 and supersedes sveltejs#4019 (extremely similar change, mostly just adds tests/docs)

Author: tivac

site/content/docs/03-template-syntax.md

@@ -971,7 +971,7 @@ transition:fn|local={params}
 
 
 ```js
-transition = (node: HTMLElement, params: any) => {
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
 	delay?: number,
 	duration?: number,
 	easing?: (t: number) => number,
@@ -1014,6 +1014,16 @@ Like actions, transitions can have parameters.
 {/if}
 ```
 
+##### Transition options
+
+---
+
+Transitions also get passed an options object which provides data about the type of transition.
+
+Possible values in the options object are:
+
+* `direction` - one of `in`, `out`, or `both` depending on the type of transition
+
 ##### Custom transition functions
 
 ---

src/runtime/internal/transitions.ts

@@ -86,10 +86,12 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
 
 const null_transition: TransitionConfig = { duration: 0 };
 
-type TransitionFn = (node: Element, params: any) => TransitionConfig;
+type TransitionOptions = { direction: 'in' | 'out' | 'both' };
+type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig;
 
 export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'in' };
+	let config = fn(node, params, options);
 	let running = false;
 	let animation_name;
 	let task;
@@ -150,7 +152,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 			delete_rule(node);
 
 			if (is_function(config)) {
-				config = config();
+				config = config(options);
 				wait().then(go);
 			} else {
 				go();
@@ -171,7 +173,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 }
 
 export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'out' };
+	let config = fn(node, params, options);
 	let running = true;
 	let animation_name;
 
@@ -224,7 +227,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 	if (is_function(config)) {
 		wait().then(() => {
 			// @ts-ignore
-			config = config();
+			config = config(options);
 			go();
 		});
 	} else {
@@ -264,7 +267,8 @@ interface Program {
 }
 
 export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'both' };
+	let config = fn(node, params, options);
 
 	let t = intro ? 0 : 1;
 
@@ -373,7 +377,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 			if (is_function(config)) {
 				wait().then(() => {
 					// @ts-ignore
-					config = config();
+					config = config(options);
 					go(b);
 				});
 			} else {

test/runtime/samples/transition-js-deferred-option-direction/_config.js

@@ -0,0 +1,19 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const divIn = target.querySelector('#in');
+		const divOut = target.querySelector('#out');
+		const divBoth = target.querySelector('#both');
+
+		assert.equal(divIn.initial, 'in');
+		assert.equal(divOut.initial, 'out');
+		assert.equal(divBoth.initial, 'both');
+
+		return Promise.resolve().then(() => {
+			assert.equal(divIn.later, 'in');
+			assert.equal(divOut.later, 'out');
+			assert.equal(divBoth.later, 'both');
+		});
+	}
+};

test/runtime/samples/transition-js-deferred-option-direction/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	export let visible;
+
+	function foo(node, params, options) {
+		node.initial = options.direction
+
+		return (opts) => {
+			node.later = opts.direction;
+
+			return {
+				duration: 10,
+			};
+		};
+	}
+</script>
+
+{#if visible}
+	<div id="both" transition:foo></div>
+	<div id="in" in:foo></div>
+{/if}
+
+{#if !visible}
+	<div id="out" out:foo></div>
+{/if}

test/runtime/samples/transition-js-option-direction/_config.js

@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target }) {
+		component.visible = true;
+
+		const divIn = target.querySelector('#in');
+		const divOut = target.querySelector('#out');
+		const divBoth = target.querySelector('#both');
+
+		assert.equal(divIn.direction, 'in');
+		assert.equal(divOut.direction, 'out');
+		assert.equal(divBoth.direction, 'both');
+	}
+};

test/runtime/samples/transition-js-option-direction/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	export let visible = false;
+
+	function foo(node, params, options) {
+		console.log("options", options);
+		node.direction = options.direction
+
+		return {
+			duration: 10,
+		};
+	}
+</script>
+
+{#if visible}
+	<div id="both" transition:foo></div>
+	<div id="in" in:foo></div>
+{/if}
+
+{#if !visible}
+	<div id="out" out:foo></div>
+{/if}