Svelte 5: delayed transitions don't apply initial CSS

[Rich-Harris]

Describe the bug

If a transition has a delay, it should begin in its 0 state, not its 1 state

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE02PwW4DIQxEf8Ulh7RSJXLphbIr5TuaHDaLiayygMAbKUL8e2HTKr15rHljTxGWHGahvorw04JCiWOM4l3wPXaRb-gYm85hTXPf6Dwnijye_IlpiSExFLCTQahgU1hg_2Akp8lnYgp-_9nNDhlulOniEIZGuIxtr-Uzz-vLyhw8BK9mR_P3UF7fYBj_YS-_Yx05XK8OtXwgG152ZP-8tZ_UEZ5fqP7kUIpBN90VfBwOtY6bQLMV0DK2mCLJVmiNl2DIEhqhOK1Yz_UHA4G56ywBAAA=

Logs

No response

System Info

next

Severity

annoyance

[PatrickG]

fill: 'backwards' should fix that.
It seems like currently fill: 'forwards' is used. That might be problematic anyway. E.g. when you want to change the opacity with an inline style on an element that also uses in:fade transition.
Idealy, the animation should be removed after it finished. Fixed in #11216 by removing the animation after it finished.

[unleashy]

Is there any workaround for this issue? Quite the annoying one

[mquandalle]

A workaround would be to remove the delay and instead provide a custom easing function with an extended duration :

<script>
  import { fade } from "svelte/transition";
  import { linear } from "svelte/easing";

  function workaroundSvelte5BugWithDelay({ delay, duration, easing = linear }) {
    let virtual_duration = delay + duration;
    let threshold = delay / virtual_duration;
    return {
      duration: virtual_duration,
      easing: (x) => x < threshold ? 0 : easing((x - threshold) / (1 - threshold)),
    };
  }
</script>

<div in:fade={workaroundSvelte5BugWithDelay({ delay: 500, duration: 300 })}>hello</div>

Svelte 5 REPL