规则修改

src/views/coursewarePlay/index.module.less

@@ -107,6 +107,12 @@
   &.acitveAnimation{
     transition-duration: .8s;
   }
+  &.show{
+    display: block;
+  }
+  &.hide{
+    display: none;
+  }
   video {
     width: 100%;
     height: 100%;

src/views/coursewarePlay/index.tsx

@@ -518,42 +518,49 @@ export default defineComponent({
       checkedAnimation(popupData.activeIndex, index)
       popupData.activeIndex = index
 
-      acitveTimer.value = setTimeout(() => {
-        const item = data.itemList[index]
-        if (item) {
-          popupData.tabActive = item.knowledgePointId
-          popupData.itemActive = item.id
-          popupData.itemName = item.name
-          popupData.tabName = item.tabName
-          if (item.type == 'SONG') {
-            activeData.model = true
-          }
-          if (item.type === 'VIDEO') {
-            // 自动播放下一个视频
-            clearTimeout(activeData.timer)
-            closeToast()
-            item.autoPlay = true
-            nextTick(() => {
-              item.videoEle?.play()
-            })
+      acitveTimer.value = setTimeout(
+        () => {
+          const item = data.itemList[index]
+          if (item) {
+            popupData.tabActive = item.knowledgePointId
+            popupData.itemActive = item.id
+            popupData.itemName = item.name
+            popupData.tabName = item.tabName
+            if (item.type == 'SONG') {
+              activeData.model = true
+            }
+            if (item.type === 'VIDEO') {
+              // 自动播放下一个视频
+              clearTimeout(activeData.timer)
+              closeToast()
+              item.autoPlay = true
+              nextTick(() => {
+                item.videoEle?.play()
+              })
+            }
           }
-        }
-        // const _effectIndex = effectIndex.value + 1
-        // effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
-        
-      }, activeData.isAnimation ? 800 : 0)
+          requestAnimationFrame(() => {
+            const _effectIndex = effectIndex.value + 1
+            effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
+          })
+        },
+        activeData.isAnimation ? 800 : 0
+      )
     }
 
     /** 是否有转场动画 */
-    const checkedAnimation = (index: number, oldIndex?: number) => {
+    const checkedAnimation = (index: number, nextIndex?: number) => {
       const item = data.itemList[index]
-      const oldItem = data.itemList[oldIndex!]
-      if (oldItem) {
-        if(oldItem.knowledgePointId != item.knowledgePointId){
+      const nextItem = data.itemList[nextIndex!]
+      if (nextItem) {
+        if (nextItem.knowledgePointId != item.knowledgePointId) {
           activeData.isAnimation = true
           return
         }
-        if (item?.adviseStudyTimeSecond < 8 || oldItem?.adviseStudyTimeSecond < 8) {
+        if (
+          (item?.adviseStudyTimeSecond < 8 && index < nextIndex!) ||
+          (nextItem?.adviseStudyTimeSecond < 8 && index > nextIndex!)
+        ) {
           activeData.isAnimation = false
         } else {
           activeData.isAnimation = true
@@ -601,7 +608,8 @@ export default defineComponent({
                     class={[
                       styles.itemDiv,
                       popupData.activeIndex === mIndex && styles.itemActive,
-                      activeData.isAnimation && styles.acitveAnimation
+                      activeData.isAnimation && styles.acitveAnimation,
+                      Math.abs(popupData.activeIndex - mIndex) < 2 ? styles.show : styles.hide
                     ]}
                     style={
                       mIndex < popupData.activeIndex