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

feat: animation of finals table

Browse Source
This commit is contained in:
Settel 2022-03-16 09:39:02 +01:00
parent 5f58208140
commit 4ba02e5881
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@
<td class="final__table-col-score">{{ player.score }}</td> <td class="final__table-col-score">{{ player.score }}</td>
</tr> </tr>
</table> </table>
<hr class="final__progress" />
</div> </div>
</div> </div>
</div> </div>
@ -139,6 +140,13 @@ export default {
text-align: right; text-align: right;
} }
} }
&__progress {
opacity: 0;
color: #ffffff;
animation: finals-progress 4s ease forwards;
animation-delay: 2s;
}
} }
@keyframes finals-gradient__fade-in { @keyframes finals-gradient__fade-in {
@ -156,4 +164,9 @@ export default {
0% { opacity: 0; } 0% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
@keyframes finals-progress {
0% { margin-left: 50%; margin-right: 50%; opacity: 0.5; }
85% { margin-left: 20px; margin-right: 20px; opacity: 0.5; }
100% { margin-left: 20px; margin-right: 20px; opacity: 0; }
}
</style> </style>