节奏律动切换时候闪一下

src/view/rhythm/index.module.less

@@ -104,6 +104,9 @@
                     border-radius: 28px;
                     box-shadow: 0 0 0 4px #FFFFFF;
                     background-color: #35A8FF;
+                    &.highlight {
+                        background-color: #fff;
+                    }
                 }
             }
         }

src/view/rhythm/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, ref } from "vue"
+import { computed, defineComponent, onMounted, ref, nextTick } from "vue"
 import styles from "./index.module.less"
 import state from "/src/state"
 import { headTopData } from "/src/page-instrument/header-top"
@@ -29,8 +29,16 @@ export default defineComponent({
       }
       const rhythmData = ref<rhythmData[][]>([])
       const actRhythmData = computed<rhythmData[]>(() => {
+         if (headTopData.rhythmModeDirection === "vertical") {
+            isFlash.value = true
+            const _time = setTimeout(() => {
+               clearTimeout(_time)
+               isFlash.value = false
+            }, 80)
+         }
          return rhythmData.value[Math.floor(state.activeNoteIndex / 6)]
       })
+      const isFlash = ref(false)
       function initRhythmData() {
          const rhythmArr = state.times.map(item => {
             const noteElement = item.noteElement
@@ -79,7 +87,11 @@ export default defineComponent({
                      {headTopData.rhythmModeDirection !== "vertical" && <div class={styles.titImg}></div>}
                      {headTopData.rhythmModeDirection === "vertical" && (
                         <div
-                           class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`]]}
+                           class={[
+                              styles.rhythmImg,
+                              styles[`rhythm${rhythmImgObj[actRhythmData.value[state.activeNoteIndex % 6].rhythmImg]}`],
+                              isFlash.value && styles.highlight
+                           ]}
                         ></div>
                      )}
                      {actRhythmData.value.map((item, index) => {