Fix for #2655 - adding introstart...outroend events to in-out transition

src/runtime/internal/transitions.ts

@@ -71,10 +71,15 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 		if (task) task.abort();
 		running = true;
 
+    add_render_callback(() => dispatch(node, true, 'start'));
+
 		task = loop(now => {
 			if (running) {
 				if (now >= end_time) {
 					tick(1, 0);
+
+          dispatch(node, true, 'end');
+
 					cleanup();
 					return running = false;
 				}
@@ -141,11 +146,15 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 		const start_time = now() + delay;
 		const end_time = start_time + duration;
 
+    add_render_callback(() => dispatch(node, false, 'start'));
+
 		loop(now => {
 			if (running) {
 				if (now >= end_time) {
 					tick(0, 1);
 
+          dispatch(node, false, 'end');
+
 					if (!--group.remaining) {
 						// this will result in `end()` being called,
 						// so we don't need to clean up here

test/runtime/samples/transition-js-events-in-out/_config.js

@@ -0,0 +1,71 @@
+export default {
+	props: {
+		visible: false,
+		things: ['a', 'b', 'c', 'd']
+	},
+
+	// intro: true,
+
+	html: `
+		<p>waiting...</p>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(50);
+
+		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		await raf.tick(100);
+		assert.equal(component.intro_count, 0);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introend</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		component.visible = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>outrostart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(150);
+		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.outro_count, 4);
+
+		await raf.tick(200);
+		assert.equal(component.outro_count, 0);
+
+		component.visible = true;
+
+		await raf.tick(250);
+		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+	}
+};

test/runtime/samples/transition-js-events-in-out/main.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let things;
+	export let visible;
+
+	export let intros = [];
+	export let outros = [];
+	export let intro_count = 0;
+	export let outro_count = 0;
+
+	let status = 'waiting...';
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function introstart(e) {
+		intros.push(e.target.textContent);
+		intro_count += 1;
+		status = 'introstart';
+	}
+
+	function introend(e) {
+		intro_count -= 1;
+		status = 'introend';
+	}
+
+	function outrostart(e) {
+		outros.push(e.target.textContent);
+		outro_count += 1;
+		status = 'outrostart';
+	}
+
+	function outroend(e) {
+		outro_count -= 1;
+		status = 'outroend';
+	}
+</script>
+
+<p>{status}</p>
+
+{#each things as thing}
+	{#if visible}
+		<p
+			in:foo
+			out:foo
+			on:introstart={introstart}
+			on:introend={introend}
+			on:outrostart={outrostart}
+			on:outroend={outroend}
+		>{thing}</p>
+	{/if}
+{/each}