glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FontDisplay): add animation on displayed fonts list order change

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-30 00:56:58 +03:00
parent b031e560af
commit f07b699926
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
View File

@@ -3,12 +3,16 @@
Displays a grid of FontSampler components for each displayed font. Displays a grid of FontSampler components for each displayed font.
--> -->
<script lang="ts"> <script lang="ts">
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';
import { displayedFontsStore } from '../../model'; import { displayedFontsStore } from '../../model';
import FontSampler from '../FontSampler/FontSampler.svelte'; import FontSampler from '../FontSampler/FontSampler.svelte';
</script> </script>
<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]"> <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
{#each displayedFontsStore.fonts as font (font.id)} {#each displayedFontsStore.fonts as font (font.id)}
<FontSampler font={font} bind:text={displayedFontsStore.text} /> <div animate:flip={{ delay: 0, duration: 400, easing: quintOut }}>
<FontSampler font={font} bind:text={displayedFontsStore.text} />
</div>
{/each} {/each}
</div> </div>