From d829eb94ef4f1178992f9d800b71d6e58b30d856 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sat, 6 May 2017 02:06:07 -0400
Subject: [PATCH] handle bidirectional transitions

---
 src/generators/dom/visitors/EachBlock.js      |  2 +-
 .../_config.js                                | 65 +++++++++++++++++++
 .../main.html                                 | 18 +++++
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.html

diff --git a/src/generators/dom/visitors/EachBlock.js b/src/generators/dom/visitors/EachBlock.js
index da3e30f9e1..4d5f9622ea 100644
--- a/src/generators/dom/visitors/EachBlock.js
+++ b/src/generators/dom/visitors/EachBlock.js
@@ -188,7 +188,6 @@ function keyed ( generator, block, state, node, snippet, { each_block, create_ea
 			for ( ${i} = 0; ${i} < discard_pile.length; ${i} += 1 ) {
 				var ${iteration} = discard_pile[${i}];
 				if ( ${iteration}.discard ) {
-					// console.log( 'discarding ' + [ ${iteration}.last && ${iteration}.last.key, ${iteration}.key, ${iteration}.next && ${iteration}.next.key ].join( '-' ) );
 					${fn}( ${iteration} );
 				}
 			}
@@ -249,6 +248,7 @@ function keyed ( generator, block, state, node, snippet, { each_block, create_ea
 
 			if ( last ) last.next = ${lookup}[${key}];
 			${lookup}[${key}].last = last;
+			${node._block.hasIntroMethod && `${lookup}[${key}].intro( ${parentNode}, ${anchor} );`}
 			last = ${lookup}[${key}];
 
 			${_iterations}[${i}] = ${lookup}[ ${key} ];
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
new file mode 100644
index 0000000000..0b5c3a1d1a
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
@@ -0,0 +1,65 @@
+export default {
+	data: {
+		things: [
+			{ name: 'a' },
+			{ name: 'b' },
+			{ name: 'c' }
+		]
+	},
+
+	test ( assert, component, target, window, raf ) {
+		const divs = target.querySelectorAll( 'div' );
+		divs[0].i = 0; // for debugging
+		divs[1].i = 1;
+		divs[2].i = 2;
+
+		assert.equal( divs[0].foo, 0 );
+		assert.equal( divs[1].foo, 0 );
+		assert.equal( divs[2].foo, 0 );
+
+		raf.tick( 100 );
+		assert.equal( divs[0].foo, 1 );
+		assert.equal( divs[1].foo, 1 );
+		assert.equal( divs[2].foo, 1 );
+
+		component.set({
+			things: [
+				{ name: 'a' },
+				{ name: 'c' }
+			]
+		});
+
+		const divs2 = target.querySelectorAll( 'div' );
+		assert.strictEqual( divs[0], divs2[0] );
+		assert.strictEqual( divs[1], divs2[1] );
+		assert.strictEqual( divs[2], divs2[2] );
+
+		raf.tick( 150 );
+		assert.equal( divs[0].foo, 1 );
+		assert.equal( divs[1].foo, 0.5 );
+		assert.equal( divs[2].foo, 1 );
+
+		component.set({
+			things: [
+				{ name: 'a' },
+				{ name: 'b' },
+				{ name: 'c' }
+			]
+		});
+
+		raf.tick( 175 );
+		assert.equal( divs[0].foo, 1 );
+		assert.equal( divs[1].foo, 0.75 );
+		assert.equal( divs[2].foo, 1 );
+
+		raf.tick( 225 );
+		const divs3 = target.querySelectorAll( 'div' );
+		assert.strictEqual( divs[0], divs3[0] );
+		assert.strictEqual( divs[1], divs3[1] );
+		assert.strictEqual( divs[2], divs3[2] );
+
+		assert.equal( divs[0].foo, 1 );
+		assert.equal( divs[1].foo, 1 );
+		assert.equal( divs[2].foo, 1 );
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.html b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.html
new file mode 100644
index 0000000000..c755bb12e6
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.html
@@ -0,0 +1,18 @@
+{{#each things as thing @name}}
+	<div transition:foo>{{thing.name}}</div>
+{{/each}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file