onintrostart does not respect delay

[aubergene]

Describe the bug

The onintrostart fires immediately, before the element has been mounted ignoring the delay parameter. This is in Svelte 4 and 5

Reproduction

https://svelte.dev/playground/9e45fd9f78974bb6a4b7714b1eed5417?version=5.1.3

Logs

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 107.25 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/Library/Caches/fnm_multishells/2228_1725926009881/bin/node
    npm: 10.2.3 - ~/Library/Caches/fnm_multishells/2228_1725926009881/bin/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 130.0.6723.70
    Safari: 17.6

Severity

annoyance

[Galacsh]

Hello, I'm just leaving my opinion.

The reason this looks like a bug is probably because the delay parameter (which is for the "animate" function) can also be used in transition directive.

Transition (in/out): __trostart event fired → animate with options(💡delay, duration, ...) → __troend event fired

Since __trostart and __troend events are for transition, onintrostart firing immediately before the delay looks correct.
Rather, I think we need a FR for new events something like: (just an idea.)

• animatestart
• animateabort
• ...

---

What happens in the playground

With the documentation + little searching on codes, playground code seems to run like this:

1. Clicked the toggle button
2. {#if visible} evaluated to true
   → {#if}...{/if} block and the {#each}...{#each} block created
3. Transition starts right away.

   A transition is triggered by an element entering or leaving the DOM...
   https://svelte.dev/docs/svelte/transition

4. Under the hood, svelte dispatches event in/outrostart before calling animate
   

   svelte/packages/svelte/src/internal/client/dom/elements/transitions.js

   Line 220 in 4441952

   var transition = {

   
   

   svelte/packages/svelte/src/internal/client/dom/elements/transitions.js

   Lines 237 to 240 in 4441952

   	dispatch_event(element, 'introstart');
   	intro = animate(element, get_options(), outro, 1, () => {
   	dispatch_event(element, 'introend');

5. animate handles duration, delays and finally calls on_finish
   

   svelte/packages/svelte/src/internal/client/dom/elements/transitions.js

   Line 309 in 4441952

   function animate(element, options, counterpart, t2, on_finish) {

   
   

   svelte/packages/svelte/src/internal/client/dom/elements/transitions.js

   Lines 417 to 421 in 4441952

   	animation.onfinish = () => {
   	get_t = () => t2;
   	tick?.(t2, 1 - t2);
   	on_finish();
   	};

6. on_finish dispatches event in/outroend (since transition passed () => dispatch_event("__troend"))

[aubergene]

Yes, I agree, it makes sense to add these events and keep the existing API, thanks for the investigation!