Svelte 5: intro transition doesn't work in dev mode

[hgl]

Describe the bug

When in dev mode, intro transition doesn't trigger. But once the project is built, it correctly triggers.

Reproduction

Clone https://github.com/hgl/svelte-intro-transition
Run pnpm dev.
Click the toggle button.
The red box should fade in, but it currently doesn't.

I didn't add intro: true since it's now the default.

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Memory: 53.69 MB / 32.00 GB
    Shell: 3.7.1 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 18.19.1 - /etc/profiles/per-user/hgl/bin/node
    npm: 10.2.4 - /etc/profiles/per-user/hgl/bin/npm
    pnpm: 8.15.5 - /etc/profiles/per-user/hgl/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
    Safari Technology Preview: 18.0
  npmPackages:
    svelte: 5.0.0-next.178 => 5.0.0-next.178 

Severity

annoyance

[hgl]

I believe transition is turned off by this line.

[trueadm]

If you make the transition global, it should work as intended.

[hgl]

Oh, thanks. That fixed it.

But is it by design that dev and prod mode behave differently?

[trueadm]

@hgl I get the exact same behaviour in prod as I do in dev.

[hgl]

In my case if i remove the global modifier, and build the project, intro transition works (kinda, doesn't trigger on first load, but triggers on subsequent dynamic loads).

Screen.Recording.2024-07-10.at.8.54.10.PM.mov

[trueadm]

(kinda, doesn't trigger on first load, but triggers on subsequent dynamic loads)

What does a "dynamic load" mean?

[hgl]

first load: page loads and the component is loaded.
dynamic load: toggle button is clicked, and a new component is loaded.

Without the global modifier:

• in dev mode, no intro transition is triggered for either kind (red box doesn't fade in when i click the toggle button)
• in prod mode, intro transition is triggered for dynamic load (if i click the toggle button, the red box fades in).

[trueadm]

Ah, you mean the <svelte:component> by the dynamic load. Yeah that's a bug – I have a fix for that coming up.