重新修复歌词突然从下面闪现的问题

Project-And-Factory · Jul 10, 2023 · b9996f4 · b9996f4
1 parent 032a16d
commit b9996f4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1243,9 +1243,10 @@ import { transform } from '@vue/compiler-core'
                 for(;tempStrIndex <= strNowIndex;tempStrIndex++){
                       
                 // anime({
-                //   targets: '.left-sideImage>div',
-                //   scale: 1.2,
-                //   translateX:'-50%',
+                //   targets: 'img.ImageBlurBackground',
+                //   // scale: 1,
+                //   // translateX:-0.5,
+                //   height: '*=1.1',
                 //   duration: 48,
                 //   direction: 'alternate',
                 //   // easing: 'spring(1, 80, 10, 0)'
@@ -1354,7 +1355,7 @@ import { transform } from '@vue/compiler-core'
                 if (offset < -3) {
                   // el.style.visibility = 'hidden';
                   return false
-                } else if (offset > 7) {
+                } else if (offset > 6) {
                   // el.style.display = 'none';
                   return false
                 } else {
@@ -1370,9 +1371,7 @@ import { transform } from '@vue/compiler-core'
               } else {
                 dur = configContent.config.lyricSet.dur
               }
-              // let nowTime = Date.now()
 
-              lyrics.style.setProperty('--transform', translateYContent ) 
 
 
               let needRendereds =[]
@@ -1392,7 +1391,7 @@ import { transform } from '@vue/compiler-core'
                   }
                 } else {
                   element.setAttribute('displaying',false)
-                  element.removeAttribute('style')
+                  element.style.setProperty('transform', translateYContent)
                 }
               }
               let nowRendingLyric = (lyricNum <= 3)?lyricNum:3;
@@ -1406,14 +1405,15 @@ import { transform } from '@vue/compiler-core'
                 color: (el,i)=> {
                   return (i == (nowRendingLyric))?'rgb(0,0,0,0.6)':'rgb(0,0,0,0.12)'
                 },
-                delay: (el,i)=> (force == true)?'':config
+                delay: (el,i)=> (force == true||configContent.config.lyricSet
+                      .funcDelay==false)?'0':config
                       .settingTemperture.lyricSet.funcDelay[configContent.config.lyricSet
                         .funcDelay](i - nowRendingLyric),
                 filter:(el,i)=>config.settingTemperture.lyricSet.funcBlur[configContent.config
                       .lyricSet
                       .funcBlur](i - nowRendingLyric),
                 easing: (configContent.config.lyricSet
-                      .funcDelay==false)?'cubicBezier(.3, .5, .2, 1)':'spring(1, 80, 12, 0)'
+                      .funcDelay==false)?'cubicBezier(.3, .5, .2, 1)':'spring(1, 80, 10, 0)'
               })
 
             }

diff --git a/src/js/config.js b/src/js/config.js
@@ -135,7 +135,7 @@ var settingTemperture = {
         funcDelay: {
             true: (offset) => {
                 if (offset < -2 || offset > 7) return 0
-                return 32 * (offset + 2);
+                return 45 * (offset + 2);
                 // return Math.floor(64 * ((offset - 1) * (0.9 ** Math.abs(offset -3))));
             },
             false: (offset) => {

diff --git a/src/style.css b/src/style.css
@@ -1378,7 +1378,6 @@ ul#lyrics {
   min-width: 7em;
   border-left: solid .2em #00000000;
   transform-origin: .3em 60%;
-  transform: var(--transform);
   /* --animation-speed-line: cubic-bezier(.25,.1,.25,1); */
   /* --animation-speed-line:cubic-bezier(.3, .5, .2, 1); */
   --dur: 850ms !important;
@@ -1387,15 +1386,13 @@ ul#lyrics {
 
 }
 #lyric ul li[displaying=true]{
-  transform: var(--transform)
     /* transition: all  calc(var(--dur) ) var(--animation-speed-line) ,filter 300ms,font-size 0s */
 }
 #lyric ul li[displaying=false]{
   transition: none !important;
   visibility: hidden !important;
   filter: none !important;
   color: #0000 !important;
-  transform: var(--transform) !important;
 }
 
 #lyric ul li:hover {
@@ -1438,7 +1435,6 @@ li div.Padding {
   visibility: visible
 }
 #lyric ul li[lyricFocus=true]{
-  transform: var(--transform) scale(1);
   color: rgb(0, 0, 0, 0.6);
   filter: none !important;
 }