苗条的过渡似乎结束得太早了

Question

我正在尝试在 Svelte 中构建一个简单的过渡，其中我的卡片在页面加载时进行动画处理。我已经按照让它正确启动 onMount，所以没问题。但是，过渡本身似乎“跳”到结尾的速度太快了，并跳过了最后几帧。

GIF of problem running on localhost.

奇怪的是，当我将相同的代码复制并粘贴到 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 似乎已经解决了视觉错误。

苗条的过渡似乎结束得太早了

Svelte transition seems to finish too soon

html

css

svelte

svelte-transition