fix: improve transition outro effect

[trueadm]

Fixes #10219.

[changeset-bot]

🦋 Changeset detected

Latest commit: df91fd5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[aradalvand]

Thank you @trueadm, ALMOST perfect. The easing indeed seems to have been fixed, however, a new issue is that the outro transition now goes beyond the initial position of the element — in this video, notice how the the first time the checkbox is toggled, the outro transition ends with the element having a little bit of space on the left, whereas the second time, it goes too far to the left (repro):

Rec.0017.mp4

[trueadm]

Update: I'm still not happy with this (I pushed some fixes but they're not right still). It turns out that this is far more complicated to get right. Here is the working example I've been using locally to test this with:

<script>
	import { fly } from 'svelte/transition';
	import { cubicOut } from 'svelte/easing';

	let show = false;
</script>

<label for="show">show:</label><input type="checkbox" id="show" bind:checked={show} />
{#if show}
	<h1 transition:fly={{ duration: 2000, easing: cubicOut, x: -200, opacity: 0.5 }}>Hello World!</h1>
{/if}


<h1>Hello World!</h1>
<h1 style="transform: translateX(-200px)">Hello World!</h1>

<style>
	h1 {
		margin: auto;
		width: fit-content;
	}
</style>

@Rich-Harris I wonder if you have some bandwidth if you could play around with this and see if you can discover anything? Specifically if you play around with the logic in packages/svelte/src/internal/client/transitions.js that are the changed lines in this PR, you might come across something.

[xamir82]

@trueadm what was the conclusion here? i'd have loved to see this fixed.

[trueadm]

@xamir82 This is fixed now :)

[xamir82]

@trueadm Ah yes :) It seems like it is. Thank you!
Missed which PR actually fixed it though!
I guess #10219 could also be closed as completed now?