Переход на Svelte, кажется, закончился слишком рано

Question

Я пытаюсь создать простой переход в Svelte, где у меня есть карточки, которые анимируются при загрузке страницы. Я следовал этому ответу , чтобы заставить его работать правильно onMount, так что было нормально. Однако сам переход, кажется, слишком быстро «прыгает» в конец и пропускает несколько последних кадров.

GIF проблемы, работающей на локальном хосте .

Как ни странно, когда я копирую и вставляю тот же код в REPL , визуальная ошибка, кажется, исправлена. Я даже скачал REPL и запустил его локально, но ошибка все еще появляется.

Вот код.

      <script>
    import { fly } from 'svelte/transition';
    import { onMount } from 'svelte';
    const contents = [
        {
            id: 1,
        },
        {
            id: 2,
        },
        {
            id: 3,
        },
    ];

    let ready = false;
    onMount(() => (ready = true));
</script>

<main>
    <div class="topBar" />
    <div class="container">
        {#if ready}
            {#each contents as content, i}
                <div
                    class="transCard"
                    transition:fly={{ y: 80, duration: 1000, delay: i * 200 }}
                />
            {/each}
        {/if}
    </div>
</main>

<style>
    main {
        background: white;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        overflow: hidden;
        margin-top: 80px;
    }

    .topBar {
        width: 100vw;
        height: 80px;
        background: black;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .transCard {
        width: 100%;
        height: 200px;
        background: gray;
    }
</style>

Answer 1

Сам нашел ответ! Не уверен, почему это исправлено, но для меня изменение transitionчтобы просто inкажется, вылечил визуальный баг.