smooth animations for homeservers

This commit is contained in:
b1ek 2023-08-23 22:46:27 +10:00
parent 01e5016495
commit 93bfb95f6a
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 41 additions and 4 deletions

View File

@ -8,10 +8,27 @@
let list = []; let list = [];
let loaded = false; let loaded = false;
let loaded_fade_anim = false;
let list_fade_anim = false;
// load servers // load servers
invoke('list_servers').then((data: any) => { 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);
}) })
</script> </script>
@ -29,14 +46,14 @@
</p> </p>
<div class={style.list}> <div class={style.list}>
{#if !loaded} {#if !loaded}
<p> <p class={loaded_fade_anim ? style.fade_out : ''}>
Loading...<br/> Loading...<br/>
<Jumper color='#e1e1e1' duration='3s' /> <Jumper color='#e1e1e1' duration='3s' />
</p> </p>
{/if} {/if}
{#if loaded} {#if loaded}
<table style='margin:0 auto;min-width:100%'> <table style='margin:0 auto;min-width:100%' class={list_fade_anim ? style.fade_in : ''}>
<tbody> <tbody>
<tr> <tr>
<td class={style.server}> <td class={style.server}>

View File

@ -3,6 +3,26 @@
font-size: 20pt; font-size: 20pt;
font-weight: 400; 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 { .list {
margin-top: 60px; margin-top: 60px;
text-align: center; text-align: center;