abort intros before restarting them - fixes #546

src/generators/dom/visitors/Element/addTransitions.js

@@ -40,7 +40,10 @@ export default function addTransitions ( generator, block, state, node, intro, o
 			const fn = `${generator.alias( 'template' )}.transitions.${intro.name}`; // TODO add built-in transitions?
 
 			if ( outro ) {
-				block.builders.intro.addBlock( `if ( ${outroName} ) ${outroName}.abort();` );
+				block.builders.intro.addBlock( deindent`
+					if ( ${introName} ) ${introName}.abort();
+					if ( ${outroName} ) ${outroName}.abort();
+				` );
 			}
 
 			block.builders.intro.addBlock( deindent`

src/shared/transitions.js

@@ -79,7 +79,7 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 			this.running = false;
 		},
 		abort: function () {
-			if ( !intro && obj.tick ) obj.tick( 1 ); // reset css for intro
+			if ( obj.tick ) obj.tick( 1 );
 			if ( obj.css ) document.head.removeChild( style );
 			this.running = false;
 		}

test/runtime/samples/transition-js-each-block-intro-outro/_config.js

@@ -0,0 +1,45 @@
+export default {
+	solo: true,
+
+	data: {
+		visible: false,
+		things: [ 'a', 'b', 'c' ]
+	},
+
+	test ( assert, component, target, window, raf ) {
+		component.set({ visible: true });
+		const divs = target.querySelectorAll( 'div' );
+		assert.equal( divs[0].foo, 0 );
+		assert.equal( divs[1].foo, 0 );
+		assert.equal( divs[2].foo, 0 );
+
+		raf.tick( 50 );
+		assert.equal( divs[0].foo, 0.5 );
+		assert.equal( divs[1].foo, 0.5 );
+		assert.equal( divs[2].foo, 0.5 );
+
+		component.set({ visible: false });
+
+		raf.tick( 70 );
+		assert.equal( divs[0].foo, 0.7 );
+		assert.equal( divs[1].foo, 0.7 );
+		assert.equal( divs[2].foo, 0.7 );
+
+		assert.equal( divs[0].bar, 0.8 );
+		assert.equal( divs[1].bar, 0.8 );
+		assert.equal( divs[2].bar, 0.8 );
+
+		component.set({ visible: true });
+
+		raf.tick( 100 );
+		assert.equal( divs[0].foo, 0.3 );
+		assert.equal( divs[1].foo, 0.3 );
+		assert.equal( divs[2].foo, 0.3 );
+
+		assert.equal( divs[0].bar, 1 );
+		assert.equal( divs[1].bar, 1 );
+		assert.equal( divs[2].bar, 1 );
+
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-each-block-intro-outro/main.html

@@ -0,0 +1,29 @@
+{{#each things as thing}}
+	{{#if visible}}
+		<div in:foo out:bar>{{thing}}</div>
+	{{/if}}
+{{/each}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			},
+
+			bar: function ( node, params ) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.bar = t;
+					}
+				};
+			}
+		}
+	};
+</script>