From 93bfb95f6a9253899ddc6ab2c3c0810682b1f89c Mon Sep 17 00:00:00 2001
From: b1ek
Date: Wed, 23 Aug 2023 22:46:27 +1000
Subject: [PATCH] smooth animations for homeservers
---
src/page/Explore/Explore.svelte | 25 +++++++++++++++++++++----
src/page/Explore/style.module.scss | 20 ++++++++++++++++++++
2 files changed, 41 insertions(+), 4 deletions(-)
diff --git a/src/page/Explore/Explore.svelte b/src/page/Explore/Explore.svelte
index 2dcac3d..d856d04 100644
--- a/src/page/Explore/Explore.svelte
+++ b/src/page/Explore/Explore.svelte
@@ -8,10 +8,27 @@
let list = [];
let loaded = false;
+ let loaded_fade_anim = false;
+ let list_fade_anim = false;
+
// load servers
invoke('list_servers').then((data: any) => {
- list = data;
- loaded = true;
+
+ loaded_fade_anim = true;
+
+ // wait for animation to end
+
+ setTimeout(() => {
+
+ loaded_fade_anim = false;
+ loaded = true;
+ list = data;
+ list_fade_anim = true;
+
+ setTimeout(() => {
+ list_fade_anim = false;
+ }, 1490)
+ }, 1490);
})
@@ -29,14 +46,14 @@
{#if !loaded}
-
+
Loading...
{/if}
{#if loaded}
-
+
diff --git a/src/page/Explore/style.module.scss b/src/page/Explore/style.module.scss
index c69a210..9fd59f7 100644
--- a/src/page/Explore/style.module.scss
+++ b/src/page/Explore/style.module.scss
@@ -3,6 +3,26 @@
font-size: 20pt;
font-weight: 400;
}
+
+ @keyframes fadeout {
+ 0% {
+ opacity: 1;
+ position: relative;
+ top: 0;
+ }
+ to {
+ opacity: 0;
+ position: relative;
+ top: 12px;
+ }
+ }
+
+ .fade_out {
+ animation: fadeout 1.5s ease;
+ }
+ .fade_in {
+ animation: fadeout 1.5s ease reverse;
+ }
.list {
margin-top: 60px;
text-align: center;
|