From 7b9ef42d3b241cc58be13d3a4158236804d8b2ed Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 27 May 2017 13:49:44 -0400
Subject: [PATCH] apply t0 styles to nodes if css transition has delay. fixes
 #574

---
 src/shared/transitions.js                     | 11 ++++++++++-
 .../samples/transition-css-delay/_config.js   | 12 ++++++++++++
 .../samples/transition-css-delay/main.html    | 19 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/transition-css-delay/_config.js
 create mode 100644 test/runtime/samples/transition-css-delay/main.html

diff --git a/src/shared/transitions.js b/src/shared/transitions.js
index f1e9024ca4..1fe7aa28e6 100644
--- a/src/shared/transitions.js
+++ b/src/shared/transitions.js
@@ -31,13 +31,21 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 	var obj = fn( node, params );
 	var duration = obj.duration || 300;
 	var ease = obj.easing || linear;
+	var cssText;
 
 	// TODO share <style> tag between all transitions?
 	if ( obj.css ) {
 		var style = document.createElement( 'style' );
 	}
 
-	if ( intro && obj.tick ) obj.tick( 0 );
+	if ( intro ) {
+		if ( obj.css && obj.delay ) {
+			cssText = node.style.cssText;
+			node.style.cssText += obj.css( 0 );
+		}
+
+		if ( obj.tick ) obj.tick( 0 );
+	}
 
 	return {
 		t: intro ? 0 : 1,
@@ -70,6 +78,7 @@ export function wrapTransition ( node, fn, params, intro, outgroup ) {
 			program.end = program.start + program.duration;
 
 			if ( obj.css ) {
+				if ( obj.delay ) node.style.cssText = cssText;
 				generateKeyframes( program.a, program.b, program.delta, program.duration, ease, obj.css, node, style );
 			}
 
diff --git a/test/runtime/samples/transition-css-delay/_config.js b/test/runtime/samples/transition-css-delay/_config.js
new file mode 100644
index 0000000000..e51ae5c6c8
--- /dev/null
+++ b/test/runtime/samples/transition-css-delay/_config.js
@@ -0,0 +1,12 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		component.set({ visible: true });
+		const div = target.querySelector( 'div' );
+		assert.strictEqual( div.style.opacity, '0' );
+
+		raf.tick( 50 );
+		assert.strictEqual( div.style.opacity, '' );
+
+		component.destroy();
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-delay/main.html b/test/runtime/samples/transition-css-delay/main.html
new file mode 100644
index 0000000000..cd46050a9f
--- /dev/null
+++ b/test/runtime/samples/transition-css-delay/main.html
@@ -0,0 +1,19 @@
+{{#if visible}}
+	<div transition:foo>delayed</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					delay: 50,
+					duration: 100,
+					css: t => {
+						return `opacity: ${t}`;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file