fix: ensure `bind:this` happens before transitions and animations (#12497)

* fix: ensure `bind:this` happens before transitions and animations

* test

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1890,7 +1890,8 @@ export const template_visitors = {
 				? b.literal(null)
 				: b.thunk(/** @type {Expression} */ (visit(node.expression)));
 
-		state.init.push(
+		// in after_update to ensure it always happens after bind:this
+		state.after_update.push(
 			b.stmt(
 				b.call(
 					'$.animation',
@@ -1922,7 +1923,8 @@ export const template_visitors = {
 			args.push(b.thunk(/** @type {Expression} */ (visit(node.expression))));
 		}
 
-		state.init.push(b.stmt(b.call('$.transition', ...args)));
+		// in after_update to ensure it always happens after bind:this
+		state.after_update.push(b.stmt(b.call('$.transition', ...args)));
 	},
 	RegularElement(node, context) {
 		/** @type {import('#shared').SourceLocation} */

packages/svelte/tests/runtime-runes/samples/bind-this-order/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button> <nav>hello</nav>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-this-order/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	function fly(node, params) {
+		return {};
+	}
+
+	let show = $state(false);
+	let sidebar = $state();
+</script>
+
+<button onclick={() => (show = !show)}>toggle</button>
+
+{#if show}
+	<!-- bind:this should be applied before any of the directives -->
+	<nav transition:fly={{ x: sidebar.offsetWidth }} bind:this={sidebar}>hello</nav>
+{/if}