[fix] Apply class directive properly after half way transition (#7765)

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.

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>'
+		);
+	}
+};

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>