Repository: svelte
Issue: Svelte 5: Multiple item `crossfade` is buggy
Labels: bug,transition/animation

### Describe the bug

When multiple items change their position at the same time, `crossfade` can misbehave.
Items can transition to nowhere and transition in from locations where no items can ever be.
The issue happens with or without `animate:flip`, the reproduction example uses it to show how it ideally should look, as this works in Svelte 4.

A secondary issue would be what happens when multiple such transitions are triggered in quick succession.
In Svelte 4 the layout can break completely (elements settle in the wrong locations), in Svelte 5 the position resets to the correct target after the transition ends.

### Reproduction

<details>
<summary>Code</summary>

```svelte
<script>
	import { quintOut } from 'svelte/easing';
	import { crossfade } from 'svelte/transition';
	import { flip } from 'svelte/animate';

	const [send, receive] = crossfade({
		fallback(node) {
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;

			return {
				duration: 600,
				easing: quintOut,
				css: (t) => `
					transform: ${transform} scale(${t});
					opacity: ${t}
				`
			};
		}
	});

	let items = [
		{ id: 1, team: 'a', description: 'Dianna' },
		{ id: 2, team: 'a', description: 'Oda' },
		{ id: 3, team: 'a', description: 'Anna' },
		{ id: 4, team: 'b', description: 'Keenan' },
		{ id: 5, team: 'b', description: 'Craig' },
		{ id: 6, team: 'b', description: 'Alyce' },
	];

	function shuffle() {
		items = items.map(item => ({ ...item, team: Math.random() > 0.5 ? 'a' : 'b' }));
	}
</script>

<button on:click={shuffle}>random</button>
<div class="board">
	<div class="left">
		<h2>Team A</h2>
		<div class="list">
			{#each items.filter((t) => t.team == 'a') as item (item.id)}
				<button in:receive={{ key: item.id }} out:send={{ key: item.id }} animate:flip
					on:click={() => item.team = item.team == 'a' ? 'b' : 'a'}>
					{item.description}
				</button>
			{/each}
		</div>
	</div>

	<div class="right">
		<h2>Team B</h2>
		<div class="list">
			{#each items.filter((t) => t.team == 'b') as item (item.id)}
				<button in:receive={{ key: item.id }} out:send={{ key: item.id }} animate:flip
					on:click={() => item.team = item.team == 'a' ? 'b' : 'a'}>
					{item.description}
				</button>
			{/each}
		</div>
	</div>
</div>

<style>
	.board {
		max-width: 36em;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	h2 {
		font-size: 2em;
		font-weight: 200;
		user-select: none;
	}

	button {
		top: 0;
		left: 0;
		display: block;
		font-size: 1em;
		line-height: 1;
		padding: 0.5em;
		border: none;
		border-radius: 2px;
		user-select: none;
		color: black;
		text-align: left;
	}

	.list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.left button {
		background-color: hsl(0, 100%, 83%);
	}

	.right button {
		background-color: hsl(231, 100%, 87%);
	}
</style>
```
</details>

[Svelte 4](https://svelte.dev/repl/3846554f13114fcd838271085773edfb?version=4.2.9)
[Svelte 5](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACu1WS2_jNhD-KwN1A8mALb-adMHYLtLtrSj20N6iAKXFkU2EIlVylI0r6L8X1MuykwY99FgIhqjhN8NvnnQVZFKhC9hjFWieY8CCh6IIpgGdCv_hXlARBtPAmdKmXrJxqZUF7RKdkMwLYwkq-LOUmr6WBDVk1uQQtnpz5E7qQ3h_AU6tcS7jAq_RZLl2kqTRVxqZksU1mGuZc8IGqRNKjXYEjw61mILFFOULPsH2fFhUeVhCGVdqz9PnSBuBE-ikvQFHJ4WwhQPSF5MXJaH4zYta9P0luOGbGZvDtlWMR5LtFkJtNIbwI4QhsGtEx9s_Fqm0-kwlIVFa7uPA4G6xmJ7lbTzZEO_RVuocg4gmsN3BH2dxQsOJDD5Vw0cNLuUKo08V1We__GMKnko6Nej6vDHYrDt0s9fq6oQUEkjC3MEWHltABVIwWE6BkOcMQh5OQWBbPo1v4c-Sa81DqKdjjdUHGl_FG_j6A_jDO-a_H_D7N_hfEDXX1xq3H2h8sVwerhXuPlB4UKcUe4WnLnpZqVO_D-5YZpnCaCjMPqbNO855EfmVT3JUQRzH_qs_7VdOx9hyLUweTWAHi_jWFx_31RfuQ6gnbabrRG_m5zbWm31JZDQYzVIl0-dt1dGod621zbxF7BK9EfIFUsWd2ybB3nArkqCZBRcbCjPq5Altjqvd78hzeNjMj6teeAGX7gxPqPoOeXrsXM6kIrRRV9kUe1fBNxcPJ8Bdg4ImKLEUk1HB9l5Jzbp5sK0qeMYTgw4NdQ2mJOaHxnt73YhhfvxcdMgQp6gh1ai0vMbrhqNPwL5JAA_r3dhK1UBHxTHmfg54B577kHSIzVzIlzbo_eo6AVYeju9k4Kf_NAP7_zMwrM6Z2DSDvtmMmwbpWznnr7NvUtCRwfoO8_teag9SM1gAL8l0QiFdofiJwcFK0cn8ckaYF4oTzlKjylw7BsvM-l8P4gWD9ap47Rvdv46rnkJmNM2c_AsZrAYGjfAb-ophsFosOnHp0M4cKkyJgb_Jxia7zHZmyRQMej3f--evwZO9Munz_Rsay4GGkhpnx47GshMWXIjmxlvEtwNyb6xAOyLVi2aWC1k6Bn0A_skLf4MrYz0rPrAifKUZV_KgGXgnxv7GvkF6dwefMoX9OX45E9Ji2s75Nj_jrHy-TErsj4DLOPr_JQdrSi1mHb-jU9FiCsvF4mYKn9c3kwsTTZf_Kxur9XKw8sPN-BroijWYBrkRMpMoAka2xPqp_hsKGDCzHQoAAA==)

Click "random" to cause multiple element transitions at once. If no issue is apparent, I can also provide recordings.

Click it quickly to cause transition overlap/interruptions, which should break permanently in Svelte 4 and temporarily in Svelte 5.

### Logs

_No response_

### System Info

```shell
REPL - Svelte v5.0.0-next.37
Tested in Chrome and Firefox
Windows 10
```


### Severity

annoyance