Merge pull request #2240 from sveltejs/gh-2159

call deferred transition function at correct time

src/internal/transitions.js

@@ -164,8 +164,10 @@ export function create_out_transition(node, fn, params) {
 	}
 
 	if (typeof config === 'function') {
-		config = config();
-		wait().then(go);
+		wait().then(() => {
+			config = config();
+			go();
+		});
 	} else {
 		go();
 	}

test/runtime/samples/transition-js-deferred-b/_config.js

@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		return Promise.resolve().then(() => {
+			const div = target.querySelector('.foo');
+			assert.equal(div.foo, 0);
+
+			raf.tick(50);
+			assert.equal(div.foo, 0.5);
+		});
+	},
+};

test/runtime/samples/transition-js-deferred-b/main.svelte

@@ -0,0 +1,46 @@
+<script>
+	export let visible;
+
+	let foo_text;
+	let bar_text;
+
+	function foo(node, params) {
+		foo_text = node.textContent;
+
+		return () => {
+			if (bar_text !== `b`) {
+				throw new Error(`foo ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+
+	function bar(node, params) {
+		bar_text = node.textContent;
+
+		return () => {
+			if (foo_text !== `a`) {
+				throw new Error(`bar ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+</script>
+
+{#if visible}
+	<div class="foo" in:foo>a</div>
+{:else}
+	<div out:bar>b</div>
+{/if}

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

@@ -1,5 +1,5 @@
 export default {
-	test({ assert, component, target, window, raf }) {
+	test({ assert, component, target, raf }) {
 		component.visible = true;
 
 		return Promise.resolve().then(() => {

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

@@ -1,8 +1,34 @@
 <script>
 	export let visible;
 
+	let foo_text;
+	let bar_text;
+
 	function foo(node, params) {
+		foo_text = node.textContent;
+
 		return () => {
+			if (bar_text !== `b`) {
+				throw new Error(`foo ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+
+	function bar(node, params) {
+		bar_text = node.textContent;
+
+		return () => {
+			if (foo_text !== `a`) {
+				throw new Error(`bar ran prematurely`);
+			}
+
 			return {
 				duration: 100,
 				tick: t => {
@@ -14,5 +40,7 @@
 </script>
 
 {#if visible}
-	<div transition:foo></div>
+	<div transition:foo>a</div>
+{:else}
+	<div transition:bar>b</div>
 {/if}