george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

add fade-in animations and conditional rendering to GuessesTable

Browse Source
This commit is contained in:
George Powell
2025-12-23 01:10:33 -05:00
parent 2e7cc1fa54
commit 93acafc232
5 changed files with 117 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/WinScreen.svelte
View File

@@ -73,7 +73,7 @@
</script>
<div
class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center fade-in"
>
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
{congratulationsMessage}
@@ -147,3 +147,20 @@
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
{/if}
</div>
<style>
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
</style>