transition events

src/internal/transitions.js

@@ -89,8 +89,7 @@ export function wrapTransition(component, node, fn, params, intro) {
 		},
 
 		start(program) {
-			// TODO find an alternative to this
-			// component.fire(`${program.b ? 'intro' : 'outro'}.start`, { node });
+			node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}start`));
 
 			program.a = this.t;
 			program.delta = program.b - program.a;
@@ -129,8 +128,7 @@ export function wrapTransition(component, node, fn, params, intro) {
 
 			if (obj.tick) obj.tick(this.t, 1 - this.t);
 
-			// TODO find an alternative to this
-			// component.fire(`${program.b ? 'intro' : 'outro'}.end`, { node });
+			node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}end`));
 
 			if (!program.b && !program.invalidated) {
 				program.group.callbacks.push(() => {

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

@@ -4,22 +4,24 @@ export default {
 		things: ['a', 'b', 'c', 'd']
 	},
 
+	intro: true,
+
 	test (assert, component, target, window, raf) {
 		raf.tick(50);
 		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
-		assert.equal(component.introCount, 4);
+		assert.equal(component.intro_count, 4);
 
 		raf.tick(100);
-		assert.equal(component.introCount, 0);
+		assert.equal(component.intro_count, 0);
 
 		component.visible = false;
 
 		raf.tick(150);
 		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
-		assert.equal(component.outroCount, 4);
+		assert.equal(component.outro_count, 4);
 
 		raf.tick(200);
-		assert.equal(component.outroCount, 0);
+		assert.equal(component.outro_count, 0);
 
 		component.visible = true;
 		component.$on('intro.start', () => {
@@ -28,6 +30,6 @@ export default {
 
 		raf.tick(250);
 		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
-		assert.equal(component.introCount, 4);
+		assert.equal(component.intro_count, 4);
 	}
 };

test/runtime/samples/transition-js-events/main.html

@@ -1,16 +1,14 @@
-<!-- TODO need to rethink transition events!
-     Perhaps add on:introend etc on the elements? -->
-
 <script>
 	import { onMount } from 'svelte';
 
-	// [svelte-upgrade suggestion]
-	// manually refactor all references to __this
-	const __this = {};
-
 	export let things;
 	export let visible;
 
+	export let intros = [];
+	export let outros = [];
+	export let intro_count = 0;
+	export let outro_count = 0;
+
 	function foo(node, params) {
 		return {
 			duration: 100,
@@ -20,34 +18,33 @@
 		};
 	}
 
-	onMount(() => {
-		__this.intros = [];
-		__this.outros = [];
-		__this.introCount = 0;
-		__this.outroCount = 0;
-
-		__this.on('intro.start', ({ node }) => {
-			__this.intros.push(node.textContent);
-			__this.introCount += 1;
-		});
-
-		__this.on('intro.end', () => {
-			__this.introCount -= 1;
-		});
-
-		__this.on('outro.start', ({ node }) => {
-			__this.outros.push(node.textContent);
-			__this.outroCount += 1;
-		});
-
-		__this.on('outro.end', () => {
-			__this.outroCount -= 1;
-		});
-	});
+	function introstart(e) {
+		intros.push(e.target.textContent);
+		intro_count += 1;
+	}
+
+	function introend(e) {
+		intro_count -= 1;
+	}
+
+	function outrostart(e) {
+		outros.push(e.target.textContent);
+		outro_count += 1;
+	}
+
+	function outroend(e) {
+		outro_count -= 1;
+	}
 </script>
 
 {#each things as thing}
 	{#if visible}
-		<p transition:foo>{thing}</p>
+		<p
+			transition:foo
+			on:introstart={introstart}
+			on:introend={introend}
+			on:outrostart={outrostart}
+			on:outroend={outroend}
+		>{thing}</p>
 	{/if}
 {/each}