Merge branch 'kajian_bo_yunjiaolian' into jenkins

src/views/coursewarePlay/index.module.less

@@ -95,7 +95,7 @@
   width: 100%;
   height: 100%;
   background-color: #000;
-  transition-duration: .8s;
+  // transition-duration: .8s;
   transform-style: preserve-3d;
   transition-property: transform, opacity, height;
   backface-visibility: hidden;
@@ -104,6 +104,9 @@
   &.itemActive{
     z-index: 10;
   }
+  &.acitveAnimation{
+    transition-duration: .8s;
+  }
   video {
     width: 100%;
     height: 100%;

src/views/coursewarePlay/index.tsx

@@ -154,6 +154,7 @@ export default defineComponent({
     const activeData = reactive({
       nowTime: 0,
       model: true, // 遮罩
+      isAnimation: true, // 是否动画
       videoBtns: true, // 视频
       currentTime: 0,
       duration: 0,
@@ -215,11 +216,9 @@ export default defineComponent({
             iframeRef: null,
             videoEle: null,
             tabName: item.name,
-            isAnimation: true, // 当前知识点
             autoPlay: false, //加载完成是否自动播放
             isprepare: false, // 视频是否加载完成
-            isRender: false, // 是否渲染了
-            effectIndex: Math.round(Math.random() * (effects.length - 1))
+            isRender: false // 是否渲染了
           })
         }
       }
@@ -454,47 +453,47 @@ export default defineComponent({
     const effects = [
       {
         prev: {
-          transform: 'translate3d(0, 0, -800px) rotateX(180deg)',
+          transform: 'translate3d(0, 0, -800px) rotateX(180deg)'
         },
         next: {
-          transform: 'translate3d(0, 0, -800px) rotateX(-180deg)',
+          transform: 'translate3d(0, 0, -800px) rotateX(-180deg)'
         }
       },
       {
         prev: {
-          transform: 'translate3d(-100%, 0, -800px)',
+          transform: 'translate3d(-100%, 0, -800px)'
         },
         next: {
-          transform: 'translate3d(100%, 0, -800px)',
+          transform: 'translate3d(100%, 0, -800px)'
         }
       },
       {
         prev: {
-          transform: 'translate3d(-50%, 0, -800px) rotateY(80deg)',
+          transform: 'translate3d(-50%, 0, -800px) rotateY(80deg)'
         },
         next: {
-          transform: 'translate3d(50%, 0, -800px) rotateY(-80deg)',
+          transform: 'translate3d(50%, 0, -800px) rotateY(-80deg)'
         }
       },
       {
         prev: {
-          transform: 'translate3d(-100%, 0, -800px) rotateY(-120deg)',
+          transform: 'translate3d(-100%, 0, -800px) rotateY(-120deg)'
         },
         next: {
-          transform: 'translate3d(100%, 0, -800px) rotateY(120deg)',
+          transform: 'translate3d(100%, 0, -800px) rotateY(120deg)'
         }
-      },
+      }
       //风车4
-      {
-        prev: {
-          transform: 'translate3d(-50%, 50%, -800px) rotateZ(-14deg)',
-          opacity: 0
-        },
-        next: {
-          transform: 'translate3d(50%, 50%, -800px) rotateZ(14deg)',
-          opacity: 0
-        }
-      },
+      // {
+      //   prev: {
+      //     transform: 'translate3d(-50%, 50%, -800px) rotateZ(-14deg)',
+      //     opacity: 0
+      //   },
+      //   next: {
+      //     transform: 'translate3d(50%, 50%, -800px) rotateZ(14deg)',
+      //     opacity: 0
+      //   }
+      // },
       //翻页5
       // {
       //   prev: {
@@ -510,57 +509,54 @@ export default defineComponent({
     ]
 
     const acitveTimer = ref()
-    const animationTimer =ref()
     // 轮播切换
     const handleSwipeChange = (index: number) => {
       if (popupData.activeIndex == index) return
-      checkedAnimation(popupData.activeIndex)
-      popupData.activeIndex = index
       handleStop()
       clearTimeout(acitveTimer.value)
-      clearTimeout(animationTimer.value)
+      const oldIndex = popupData.activeIndex
+      popupData.activeIndex = index
 
-      const item = data.itemList[index]
-      acitveTimer.value = setTimeout(
-        () => {
-          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
           }
-        },
-        item.isAnimation ? 800 : 0
-      )
-      animationTimer.value = setTimeout(() => {
-        const index = effectIndex.value + 1
-        requestAnimationFrame(() => {
-          // effectIndex.value = index >= effects.length - 1 ? 0 : index
-        })
-        // effectIndex.value = Math.round(Math.random() * (effects.length - 1))
-      }, 1000)
+          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
+        checkedAnimation(popupData.activeIndex, oldIndex)
+      }, activeData.isAnimation ? 800 : 0)
     }
 
     /** 是否有转场动画 */
-    const checkedAnimation = (index: number) => {
-      const oldItem = data.itemList[index]
-      const preItem = data.itemList[index - 1]
-      const nextItem = data.itemList[index + 1]
-      oldItem && (oldItem.isAnimation = oldItem?.adviseStudyTimeSecond < 8 ? false : true)
-      preItem && (preItem.isAnimation = oldItem.knowledgePointId == preItem.knowledgePointId && oldItem?.adviseStudyTimeSecond < 8 ? false : true)
-      nextItem && (nextItem.isAnimation = oldItem.knowledgePointId == nextItem.knowledgePointId && oldItem?.adviseStudyTimeSecond < 8 ? false : true)
+    const checkedAnimation = (index: number, oldIndex?: number) => {
+      const item = data.itemList[index]
+      const oldItem = data.itemList[oldIndex!]
+      if (oldItem) {
+        activeData.isAnimation =
+          oldItem.knowledgePointId != item.knowledgePointId
+            ? true
+            : item?.adviseStudyTimeSecond < 8
+            ? false
+            : true
+      } else {
+        activeData.isAnimation = item?.adviseStudyTimeSecond < 8 ? false : true
+      }
     }
 
     // 上一个知识点, 下一个知识点
@@ -598,16 +594,18 @@ export default defineComponent({
                 return isRender ? (
                   <div
                     key={'index' + mIndex}
-                    class={[styles.itemDiv, popupData.activeIndex === mIndex && styles.itemActive]}
-                    style={{
-                      ...(mIndex < popupData.activeIndex
-                        ? effects[m.effectIndex].prev
+                    class={[
+                      styles.itemDiv,
+                      popupData.activeIndex === mIndex && styles.itemActive,
+                      activeData.isAnimation && styles.acitveAnimation
+                    ]}
+                    style={
+                      mIndex < popupData.activeIndex
+                        ? effects[effectIndex.value].prev
                         : mIndex > popupData.activeIndex
-                        ? effects[m.effectIndex].next
-                        : (effects[m.effectIndex] as any).current),
-                      ...(m.isAnimation ? {} : { 'transition-duration': '0s'}),
-                      opacity: Math.abs(popupData.activeIndex - mIndex) > 1 ? 0 : 1 
-                    }}
+                        ? effects[effectIndex.value].next
+                        : {}
+                    }
                     onClick={(e: Event) => {
                       e.stopPropagation()
                       clearTimeout(activeData.timer)