handle bidirectional transitions

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} ];

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 );
+	}
+};

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>