zilong/vite-zmusic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完美解决歌词渐隐显示

Browse Source
This commit is contained in:
zilong 2021-10-29 21:51:41 +08:00
parent 15d20b8b52
commit 69643be75a
3 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/test.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>测试网页</title>
<style>
body {
/* background-color: rgba(244, 244, 244, 1); */
background-color: rgba(233, 233, 233, 1);
}
.content {
margin: 2em;
height: 200px;
overflow-y: auto;
/* background-image: linear-gradient(
rgba(255, 255, 255, 0),
rgb(255, 255, 255, 1)
); */
/* background-color: rgba(233, 233, 233, 1); */
/* -webkit-mask-image: -webkit-gradient(
linear,
left 90%,
left bottom,
from(rgba(0, 0, 0, 1)),
to(rgba(0, 0, 0, 0))
); */
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 80%,
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
);
/* background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.4) 10%,
rgba(0, 0, 0, 0.6) 40%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 1) 100%
); */
}
.lyric-line {
/* mix-blend-mode: overlay; */
}
</style>
</head>
<body>
<div style="background-color: #eee">asdfladjflsdfsdlf</div>
<div class="content">
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌词，哈歌词歌词哈</div>
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌词，哈歌词歌词歌词哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌歌词词，哈哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌歌词歌词词，哈哈</div>
<div class="lyric-line">一句歌词，哈歌词歌词歌词歌词哈</div>
<div class="lyric-line">一句歌词，哈哈</div>
<div class="lyric-line">一句歌歌词歌词歌词词，哈哈</div>
</div>
</body>
</html>

2
src/components/ArtistsSpan.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, defineProps, onUnmounted, onDeactivated } from "vue"; import { ref, onUnmounted, onDeactivated, } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const props = defineProps({ const props = defineProps({

32
src/views/common/SongDetail.vue
View File

@ -21,19 +21,18 @@ const currentLyricIdx = ref(-1);
const lyList = ref('') const lyList = ref('')
//#region 唱机 //#region 唱机
let interval = []; let interval = 0;
watch( watch(
() => [store.state.settings.playing, store.state.showSongDetail], () => [store.state.settings.playing, store.state.showSongDetail],
([playing, showSongDetail]) => { ([playing, showSongDetail]) => {
// console.log(playing, showSongDetail);
if (playing && showSongDetail) { if (playing && showSongDetail) {
interval.push( clearInterval(interval)
setInterval(() => { interval = setInterval(() => {
coverAngle.value += 0.5; coverAngle.value += 0.5;
}, 40) }, 40)
);
} else { } else {
interval.map((item) => clearInterval(item)); clearInterval(interval)
interval = [];
} }
}, },
{ immediate: true } { immediate: true }
@ -68,7 +67,7 @@ const handleLyric = (ly) => {
watch( watch(
()=> [currentLyricIdx.value,store.state.showSongDetail], ()=> [currentLyricIdx.value,store.state.showSongDetail],
([val, showSongDetail])=>{ ([val, showSongDetail])=>{
console.log('changed lyric'); // console.log('changed lyric');
if(val>0){ if(val>0){
// let elContent = document.getElementsByClassName('ly-content')[0] // let elContent = document.getElementsByClassName('ly-content')[0]
nextTick(()=>{ nextTick(()=>{
@ -205,7 +204,7 @@ export default {};
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
right: 280px; right: 296px;
height: 40px; height: 40px;
background-color: #f9f9f9; background-color: #f9f9f9;
padding-left: 50px; padding-left: 50px;
@ -305,6 +304,21 @@ export default {};
overflow-y: auto; overflow-y: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 1) 25px,
rgba(0, 0, 0, 1) 255px,
rgba(0, 0, 0, 0)
);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 1) 25px,
rgba(0, 0, 0, 1) 255px,
rgba(0, 0, 0, 0)
);
// background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521)); // background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));
.ly-content { .ly-content {
@ -316,7 +330,7 @@ export default {};
// justify-items: center; // justify-items: center;
.ly-line { .ly-line {
min-height: 32px; min-height: 35px;
display: flex; display: flex;
align-items: center; align-items: center;
} }