transitions not working

abeidabdou commented 3 months ago

Describe the bug

I don't if it's because I am new to this, but I have been trying to use a fade in transition in my code for hours and nothing is working. So I tested with others transition like slide but still. I also isolated the element from any css to make sure that the problem doesn't come from there but still nothing is working. And nothing is printed to the console, no error, nothing I can work with.

Reproduction

My code

<script>
    import { onMount } from 'svelte';
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';
    import { isPlanitNavAnimationDone } from './stores.ts';
    import { fade } from 'svelte/transition';
    const width = tweened(0, { duration: 1000, easing: cubicOut });
    const height = tweened(0, { duration: 1000, easing: cubicOut });
    let logoText = 'PlanIt';
    onMount(() => {
        width.set(125);
        height.set(70).then(() => {
            isPlanitNavAnimationDone.set(true);
        });
    });
</script>
<nav>
    <div class="navbarPlanit" style="width: {$width}px; height: {$height}px;"></div>
    <a class="planitLogo" href="/">
            {#each logoText.split('') as letter, index}
                <span in:fade={{ duration: 500, delay: index * 100 }}>
                    {letter}
                </span>
            {/each}
    </a>
</nav>
<style>
    .navbarPlanit {
        background-color: #ffffff;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
    }
    .planitLogo {
        font-family: 'Sniglet', system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 36px;
        color: #ff6363;
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>

Svelte@latest running on a docker container node:20.15.0

And every package seem to be installed correctly, thought I got the following when npm install was done, but I don't think it's related. Also can someone explain me how I can solve this, do I need to run an update on rimraf since the other two are directly under it:

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.      
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
added 269 packages, removed 2 packages, changed 5 packages, and audited 275 packages in 6m
72 packages are looking for funding
  run npm fund for details
found 0 vulnerabilities

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (4) x64 Intel(R) Core(TM) i3-3217U CPU @ 1.80GHz
    Memory: 2.69 GB / 3.76 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.15.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
  npmPackages:
    svelte: ^4.2.7 => 4.2.18 

The browser is chrome

Severity

annoyance

7nik commented 3 months ago

The initial transition doesn't play unless you manually mount the component with the intro: true option. You can trigger the transition using, e.g.,

    let logoText = '';
    onMount(() => {
        logoText = 'PlanIt';
       });

REPL

abeidabdou commented 3 months ago

The initial transition doesn't play unless you manually mount the component with the intro: true option. You can trigger the transition using, e.g.,
  let logoText = '';
  onMount(() => {
      logoText = 'PlanIt';
       });
REPL

Thanks, spend a whole night just because I didn't mount a component.

sveltejs / svelte