Transitions not working at all

[JoaoCardoso193]

Describe the bug

Svelte transitions are not working at all using the official Svelte template. I've tried using a bunch of different transitions, messing around with the parameters, removing all CSS that could affect this, and still nothing.

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

<main>
  <h1 transition:fade>Hello World!</h1>
  <p>
    Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

Not sure what the issue is here but any help would be appreciated.

Reproduction

https://github.com/JoaoCardoso193/netlify-svelte-simple-website-template

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 207.92 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 125.0.6422.113
    Edge: 125.0.2535.67
    Safari: 17.5
  npmPackages:
    rollup: ^3.15.0 => 3.29.4 
    svelte: ^3.55.0 => 3.59.2

Severity

annoyance

[Conduitry]

https://learn.svelte.dev/tutorial/transition Transitions cause elements to animate in some way only when something else is making them appear or disappear.

[JoaoCardoso193]

Thanks for the quick response @Conduitry - is there a way to easily make transitions appear on mount/destroy for a simple example like the one above?

[JoaoCardoso193]

For anyone facing the same issue, this fixed it for me, although I'm not sure this is the best way to do it:

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

  let mounted = false;
  onMount(() => {
    mounted = true;
  });
</script>

{#if mounted}
  <div transition:fade>
   ...
  </div>
{/if}