add smooth entering transition on tracks

This commit is contained in:
Tixie 2020-03-03 22:09:45 +01:00
parent 977be69127
commit d64b384203
2 changed files with 19 additions and 2 deletions

View File

@ -7,6 +7,20 @@
display: flex;
margin-right: -1rem;
padding: 1rem 0;
transform-origin: center;
animation: trackIn .3s;
}
@keyframes trackIn {
from {
opacity: 0;
transform: scale(.7, 0);
}
to {
opacity: 1;
transform: scale(1);
}
}
.track--active::before {
@ -34,6 +48,7 @@
.track__title {
overflow: hidden;
min-height: 1.14em;
color: $color-secondary;
text-overflow: ellipsis;
white-space: nowrap;
@ -47,8 +62,10 @@
.track__subtitle {
margin-top: .2rem;
min-height: 1.5em;
color: $color-grey-1;
font-size: 1.2rem;
line-height: 1.5em;
}
.track__username {

View File

@ -27,8 +27,8 @@
<div class="queue__section">
<div class="queue__sectionTitle">History</div>
{#each history as track}
<div class="track" class:track--active={track === $current} class:track--playing={!$paused}>
{#each history as track, i (track.referer.url)}
<div class="track track--history" class:track--active={track === $current} class:track--playing={!$paused}>
<div class="track__main" on:click={() => select(track)}>
<div class="track__title">{track.media.title}</div>
<div class="track__subtitle">