From d48cb1621707a75e6ef8562469e8219e8df418ec Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 5 Jan 2019 11:54:33 -0500
Subject: [PATCH] fix some more transition bugs

---
 src/compile/render-dom/wrappers/Element/index.ts |  8 +++++++-
 src/internal/style_manager.js                    | 13 +++++++------
 src/internal/transitions.js                      |  8 +++-----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
index fd04120ae8..cc479e55e7 100644
--- a/src/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -633,9 +633,15 @@ export default class ElementWrapper extends Wrapper {
 				block.builders.intro.addConditional(`@intros.enabled`, deindent`
 					@add_render_callback(() => {
 						${introName} = @create_transition(${this.var}, ${fn}, ${snippet}, true);
-						${introName}.run(1);
+						${introName}.run(1, () => {
+							${introName} = null;
+						});
 					});
 				`);
+
+				block.builders.outro.addBlock(deindent`
+					if (${introName}) ${introName}.abort();
+				`);
 			}
 
 			if (outro) {
diff --git a/src/internal/style_manager.js b/src/internal/style_manager.js
index 17a01e694b..cb0a2dde57 100644
--- a/src/internal/style_manager.js
+++ b/src/internal/style_manager.js
@@ -46,13 +46,14 @@ export function delete_rule(node, name) {
 		.filter(anim => anim.indexOf(name) < 0)
 		.join(', ');
 
-	console.log({ active });
-	if (--active <= 0) clear_rules();
+	if (!--active) clear_rules();
 }
 
 export function clear_rules() {
-	console.log(`clear rules`, active);
-	let i = stylesheet.cssRules.length;
-	while (i--) stylesheet.deleteRule(i);
-	current_rules = {};
+	requestAnimationFrame(() => {
+		if (active) return;
+		let i = stylesheet.cssRules.length;
+		while (i--) stylesheet.deleteRule(i);
+		current_rules = {};
+	});
 }
\ No newline at end of file
diff --git a/src/internal/transitions.js b/src/internal/transitions.js
index 804bd4cfb5..9b3e897960 100644
--- a/src/internal/transitions.js
+++ b/src/internal/transitions.js
@@ -26,7 +26,6 @@ export function group_outros() {
 
 export function create_transition(node, fn, params, intro) {
 	let config = fn(node, params);
-	let cssText;
 
 	let ready = !intro;
 	let t = intro ? 0 : 1;
@@ -50,8 +49,6 @@ export function create_transition(node, fn, params, intro) {
 		program.end = program.start + program.duration;
 
 		if (config.css) {
-			if (delay) node.style.cssText = cssText;
-
 			clear_animation();
 			animation_name = create_rule(program, easing, config.css);
 
@@ -103,8 +100,9 @@ export function create_transition(node, fn, params, intro) {
 
 		if (!ready) {
 			if (config.css && delay) {
-				cssText = node.style.cssText;
-				node.style.cssText += config.css(0, 1);
+				// TODO can we just use the normal rule, but delay it?
+				animation_name = create_rule({ a: 0, b: 1, d: 1, duration: 1, }, linear, () => config.css(0, 1));
+				node.style.animation = (node.style.animation ? ', ' : '') + `${animation_name} 9999s linear 1 both`;
 			}
 
 			if (config.tick) config.tick(0, 1);