girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 05:38:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update animations for lyrics, panels and tracklists | 为歌词、面板和列表更新动画 (#249)

Browse source 
* Update lyrics scrolling animation

* Remove the useless module imported by mistake

* Auto prettify the changed code

* Update lyrics animation curve and add blur effect to lyrics

* Auto prettify the changed code

* Add initial lyrics blur filter

* Update lyrics blur and fade effect

* Update open and close animation for explore page's panel

* Update tracklist hover animation

* Add scale animation to lyrics

* Auto prettify the changed code

* Update lyrics blur effect with CSS variables

* Support small screen devices for all pages

* Fix paddings for some pages

* Auto prettify the changed code

* Update lyrics page for small screen devices
This commit is contained in:
Mr. Will 2021-02-12 07:18:55 +00:00 • committed by GitHub
parent 97f2ce043b
commit 1d34aa794f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 496 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/Player.vue
View file

@ -62,7 +62,10 @@
<div class="middle-control-buttons">
<div class="blank"></div>
<div class="container" @click.stop>
<button-icon @click.native="previous" :title="$t('player.previous')"
<button-icon
@click.native="previous"
:title="$t('player.previous')"
class="auto-hide"
><svg-icon icon-class="previous"
/></button-icon>
<button-icon
@ -78,7 +81,7 @@
</div>
<div class="blank"></div>
</div>
<div class="right-control-buttons">
<div class="right-control-buttons auto-hide">
<div class="blank"></div>
<div class="container" @click.stop>
<button-icon
@ -343,6 +346,18 @@ export default {
display: flex;
}
@media (max-width: 700px) {
.controls {
display: flex;
}
.playing {
flex: 1;
}
.playing .container {
pointer-events: none;
}
}
.playing .container {
display: flex;
align-items: center;
@ -448,6 +463,20 @@ export default {
margin-left: 16px;
}
@media (max-width: 700px) {
.controls {
grid-template-columns: repeat(2, 1fr);
}
.middle-control-buttons {
justify-content: flex-end;
margin-left: auto;
}
.auto-hide,
.blank {
display: none;
}
}
// .lyrics-button {
// position: fixed;
// right: 18px;