settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

animation of finals table

Browse Source
This commit is contained in:
Settel 2021-09-24 22:23:03 +02:00
parent c751914bb0
commit ade82549eb
1 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/components/Final.vue
View File

@ -6,10 +6,10 @@
<div class="final__title">{{ title }}</div> <div class="final__title">{{ title }}</div>
</div> </div>
<div class="final__table-body"> <div class="final__table-body">
<table> <table class="final__table">
<tr v-for="player in players" :key="player.id"> <tr class="final__table-row" v-for="player in players" :key="player.id">
<td>{{ player.name }}</td> <td class="final__table-col-name">{{ player.name }}</td>
<td>{{ player.score }}</td> <td class="final__table-col-score">{{ player.score }}</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -58,7 +58,7 @@ export default {
padding: 4px; padding: 4px;
border-radius: 32px; border-radius: 32px;
background: linear-gradient(45deg, #8060c0 0, #8060c0 65%, #ffffff 70%, #8060c0 75%, #8060c0 100%); background: linear-gradient(45deg, #8060c0 0, #8060c0 65%, #ffffff 70%, #8060c0 75%, #8060c0 100%);
background-size: 400% 400%; background-size: 1000% 1000%;
animation: finals-gradient 5s linear infinite 5s; animation: finals-gradient 5s linear infinite 5s;
&::after { &::after {
@ -69,11 +69,9 @@ export default {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 4px;
border-radius: 32px;
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, #402080 60%); background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, #402080 60%);
background-size: 400% 400%; background-size: 1000% 1000%;
animation: finals-gradient__fade-in 5s ease; animation: finals-gradient__fade-in 5s ease forwards;
} }
} }
@ -103,16 +101,39 @@ export default {
font-family: Dosis; font-family: Dosis;
font-size: 32px; font-size: 32px;
table { }
&__table {
width: 100%; width: 100%;
padding: 64px; padding: 64px;
&-row {
opacity: 0;
animation: finals-text 1s ease forwards;
&:nth-child(1) { animation-delay: 2s; }
&:nth-child(2) { animation-delay: 2.2s; }
&:nth-child(3) { animation-delay: 2.4s; }
&:nth-child(4) { animation-delay: 2.6s; }
&:nth-child(5) { animation-delay: 2.8s; }
&:nth-child(6) { animation-delay: 3s; }
&:nth-child(7) { animation-delay: 3.2s; }
&:nth-child(8) { animation-delay: 3.4s; }
&:nth-child(9) { animation-delay: 3.6s; }
&:nth-child(10) { animation-delay: 3.8s; }
&:nth-child(11) { animation-delay: 4s; }
&:nth-child(12) { animation-delay: 4.2s; }
&:nth-child(13) { animation-delay: 4.4s; }
&:nth-child(14) { animation-delay: 4.6s; }
&:nth-child(15) { animation-delay: 4.8s; }
&:nth-child(16) { animation-delay: 5s; }
} }
td {
&-col-name {
max-width: 300px; max-width: 300px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
td ~ td {
&-col-score {
text-align: right; text-align: right;
} }
} }
@ -125,8 +146,12 @@ export default {
@keyframes finals-gradient { @keyframes finals-gradient {
0% { background-position: 130% 50%; } 0% { background-position: 130% 50%; }
30% { background-position: 130% 50%; } 10% { background-position: 130% 50%; }
70% { background-position: 0% 50%; } 90% { background-position: 0% 50%; }
100% { background-position: 0% 50%; } 100% { background-position: 0% 50%; }
} }
@keyframes finals-text {
0% { opacity: 0; }
100% { opacity: 100%; }
}
</style> </style>