From e20fe31ce68e9dc264b82e633ac94d89bc759eea Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 7 Aug 2022 01:17:10 +0900
Subject: [PATCH] apply class directive after half way transition

---
 .../render_dom/wrappers/Element/index.ts      |  5 +++-
 .../class-shortcut-with-transition/_config.js | 30 +++++++++++++++++++
 .../main.svelte                               | 17 +++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/_config.js
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eed7c6f4eee..8e8e0d6706e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1052,7 +1052,10 @@ export default class ElementWrapper extends Wrapper {
 				block.chunks.update.push(updater);
 			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
 				const all_dependencies = this.class_dependencies.concat(...dependencies);
-				const condition = block.renderer.dirty(all_dependencies);
+				let condition = block.renderer.dirty(all_dependencies);
+				if (block.has_outros) {
+					condition = x`!#current || ${condition}`;
+				}
 
 				// If all of the dependencies are non-dynamic (don't get updated) then there is no reason
 				// to add an updater for this.
diff --git a/test/runtime/samples/class-shortcut-with-transition/_config.js b/test/runtime/samples/class-shortcut-with-transition/_config.js
new file mode 100644
index 00000000000..80df51bd4a3
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		open: false,
+		border: true
+	},
+	html: '<p>foo</p>',
+
+	test({ assert, component, target, raf }) {
+		component.open = true;
+		raf.tick(100);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+
+		component.open = false;
+		raf.tick(150);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
+		);
+
+		component.open = true;
+		raf.tick(250);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+	}
+};
diff --git a/test/runtime/samples/class-shortcut-with-transition/main.svelte b/test/runtime/samples/class-shortcut-with-transition/main.svelte
new file mode 100644
index 00000000000..3291ec4a107
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { slide } from "svelte/transition";
+	export let open = false;
+	export let color = "red";
+	export let border = false;
+</script>
+
+<p>foo</p>
+{#if open}
+	<p class={color} class:border transition:slide|local={{ duration: 100 }}>bar</p>
+{/if}
+
+<style>
+	.border {
+		border: 4px solid black;
+	}
+</style>