I'm trying to build a simple transition in Svelte where I have cards that animate in on page load. I've followed this answer to get it to fire correctly onMount, so that has been ok. However, the transition itself seems to "jump" to the end too quickly, and skips the last few frames.
GIF of problem running on localhost.
Oddly enough, when I copy and paste the same code into the REPL, the visual bug seems to be fixed. I've even downloaded the REPL and run locally, and the bug still appears.
Here is the code.
<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>
