never abort transitions, they are either bidi or non-abortable

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

@@ -31,23 +31,18 @@ export default function addTransitions ( generator, block, state, node, intro, o
 	}
 
 	else {
-		const introName = intro && block.getUniqueName( `${state.name}_intro` );
-		const outroName = outro && block.getUniqueName( `${state.name}_outro` );
-
 		if ( intro ) {
-			block.addVariable( introName );
+			const name = block.getUniqueName( `${state.name}_intro` );
 			const snippet = intro.expression ? block.contextualise( intro.expression ).snippet : '{}';
 
-			const fn = `${generator.alias( 'template' )}.transitions.${intro.name}`; // TODO add built-in transitions?
+			block.addVariable( name );
 
-			if ( outro ) {
-				block.builders.intro.addBlock( `if ( ${outroName} ) ${outroName}.abort();` );
-			}
+			const fn = `${generator.alias( 'template' )}.transitions.${intro.name}`; // TODO add built-in transitions?
 
 			block.builders.intro.addBlock( deindent`
 				${block.component}._renderHooks.push( function () {
-					${introName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, true, null );
-					${introName}.run( 0, 1, function () {
+					${name} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, true, null );
+					${name}.run( 0, 1, function () {
 						${block.component}.fire( 'intro.end', { node: ${state.name} });
 					});
 				});
@@ -55,18 +50,16 @@ export default function addTransitions ( generator, block, state, node, intro, o
 		}
 
 		if ( outro ) {
-			block.addVariable( outroName );
+			const name = block.getUniqueName( `${state.name}_intro` );
 			const snippet = outro.expression ? block.contextualise( outro.expression ).snippet : '{}';
 
-			const fn = `${generator.alias( 'template' )}.transitions.${outro.name}`;
+			block.addVariable( name );
 
-			if ( intro ) {
-				block.builders.outro.addBlock( `${introName}.abort();` );
-			}
+			const fn = `${generator.alias( 'template' )}.transitions.${outro.name}`;
 
 			block.builders.outro.addBlock( deindent`
-				${outroName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, false, null );
-				${outroName}.run( 1, 0, function () {
+				${name} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, false, null );
+				${name}.run( 1, 0, function () {
 					detachNode( ${state.name} );
 					${block.component}.fire( 'outro.end', { node: ${state.name} });
 					if ( --${block.alias( 'outros' )} === 0 ) ${block.alias( 'outrocallback' )}();

src/shared/transitions.js

@@ -60,13 +60,13 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 	}
 
 	// CSS transition
-	var started = false;
 	var id = null;
 	var style = document.createElement( 'style' );
 
 	var cleanup = function () {
+		if ( !transition.running ) return;
 		document.head.removeChild( style );
-		transition.running = started = false;
+		transition.running = false;
 	};
 
 	return assign( transition, {
@@ -82,14 +82,10 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 
 			keyframes += '100% {' + obj.styles( this.b ) + '}\n}';
 
-			style.textContent = keyframes;
+			style.textContent += keyframes;
 			document.head.appendChild( style );
 
-			node.style.animationName = id;
-			node.style.animationDuration = ( this.duration / 1e3 ) + 's';
-			node.style.animationTimingFunction = 'linear';
-			node.style.animationIterationCount = 1;
-			node.style.animationFillMode = 'forwards';
+			node.style.animation += ( node.style.animation ? ', ' : '' ) + id + ' ' + this.duration + 'ms linear 1 forwards';
 		},
 		update: function ( now ) {
 			const p = now - this.start;