nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Fix instances list animation

Browse source
This commit is contained in:
Chocobozzz 2019-10-31 09:28:38 +01:00
parent 47844eb603
commit c262443598
No known key found for this signature in database
GPG key ID: 583A612D890159BE
1 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/InstancesList.vue
View file

@ -106,9 +106,9 @@
<div class="title">
<translate>Instances list</translate>
<transition name="mascot-loading">
<div class="mascot-loading-block">
<img v-bind:class="{ animate: loadingAnimation }" v-on:animationend="loadingAnimation = false" class="mascot-loading" :src="buildImgUrl('mascot/happy.png')" alt="PeerTube mascot">
</transition>
</div>
</div>
<div class="list" v-bind:class="{ unloaded: !error && !noResults && instances.length === 0 }">
@ -186,26 +186,30 @@
}
}
.mascot-loading {
display: none;
.mascot-loading-block {
width: 100%;
@media screen and (min-width: $responsive-screen) {
&.animate {
display: block;
animation: mascotLoadingAnimation 1s normal ease-out;
.mascot-loading {
display: none;
@keyframes mascotLoadingAnimation {
0% {
margin-left: 0;
}
@media screen and (min-width: $responsive-screen) {
&.animate {
display: block;
animation: mascotLoadingAnimation 1s normal ease-out;
50% {
opacity: 1;
}
@keyframes mascotLoadingAnimation {
0% {
margin-left: 0;
}
100% {
margin-left: calc(100% - 300px);
opacity: 0;
50% {
opacity: 1;
}
100% {
margin-left: calc(100% - 150px);
opacity: 0;
}
}
}
}