动画优化

src/views/coursewarePlay/component/video-play.tsx

@@ -97,25 +97,19 @@ export default defineComponent({
     onMounted(() => {
       videoItem.value = new Plyr(videoRef.value, {
         muted: true,
+        autoplay: true,
         controls: controls,
         autopause: true, // 一次只允许
         ratio: '16:9', // 强制所有视频的纵横比
         hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
         clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
-        fullscreen: { enabled: false, fallback: false, iosNative: false}, // 不适用全屏
+        fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
       })
       if (videoItem.value) {
-        videoItem.value.once('loadedmetadata', (e: Event) => {
-          changePlayBtn('play')
-          // console.log('自动播放', item.value.autoPlay)
-          if (item.value.autoPlay && videoItem.value) {
-            videoItem.value.play()
-          }
-          emit('loadedmetadata', videoItem.value)
-        })
         videoItem.value.on('play', () => {
-          if (videoItem.value) {
-            videoItem.value.muted = false
+          // console.log('开始播放', item.value)
+          if (!item.value.autoPlay && !item.value.isprepare && videoItem.value) {
+            videoItem.value.pause()
           }
           changePlayBtn('')
           emit('togglePlay', videoItem.value?.paused)
@@ -128,6 +122,14 @@ export default defineComponent({
           emit('ended')
           changePlayBtn('play')
         })
+        videoItem.value.once('loadedmetadata', (e: Event) => {
+          changePlayBtn('play')
+          if (item.value.autoPlay && videoItem.value) {
+            videoItem.value.play()
+          }
+          emit('loadedmetadata', videoItem.value)
+        })
+
         nextTick(() => {
           onDefault()
         })

src/views/coursewarePlay/index.tsx

@@ -495,33 +495,38 @@ export default defineComponent({
         }
       },
       //翻页5
-      {
-        prev: {
-          transform: 'translateZ(-800px) rotate3d(0, -1, 0, 90deg)',
-          opacity: 0
-        },
-        next: {
-          transform: 'translateZ(-800px) rotate3d(0, 1, 0, 90deg)',
-          opacity: 0
-        },
-        current: { transitionDelay: '700ms' }
-      }
+      // {
+      //   prev: {
+      //     transform: 'translateZ(-800px) rotate3d(0, -1, 0, 90deg)',
+      //     opacity: 0
+      //   },
+      //   next: {
+      //     transform: 'translateZ(-800px) rotate3d(0, 1, 0, 90deg)',
+      //     opacity: 0
+      //   },
+      //   current: { transitionDelay: '700ms' }
+      // }
     ]
 
     const acitveTimer = ref()
     // 轮播切换
     const handleSwipeChange = (index: number) => {
       if (popupData.activeIndex == index) return
+      const oldIndex = popupData.activeIndex
       popupData.activeIndex = index
       handleStop()
       clearTimeout(acitveTimer.value)
 
       const item = data.itemList[index]
+      const oldItem = data.itemList[oldIndex]
       if (item) {
-        const preItem = data.itemList[index - 1]
-        const nextItem = data.itemList[index + 1]
-        preItem && (preItem.isAnimation = item.knowledgePointId != preItem.knowledgePointId)
-        nextItem && (nextItem.isAnimation = item.knowledgePointId != nextItem.knowledgePointId)
+        if (oldItem?.adviseStudyTimeSecond < 8){
+          const preItem = data.itemList[index - 1]
+          const nextItem = data.itemList[index + 1]
+          preItem && (preItem.isAnimation = item.knowledgePointId != preItem.knowledgePointId)
+          nextItem && (nextItem.isAnimation = item.knowledgePointId != nextItem.knowledgePointId)
+        }
+        
       }
       acitveTimer.value = setTimeout(
         () => {
@@ -542,6 +547,9 @@ export default defineComponent({
                 item.videoEle?.play()
               })
             }
+            nextTick(() => {
+              effectIndex.value = Math.round(Math.random() * (effects.length - 1))
+            })
           }
         },
         item.isAnimation ? 800 : 0
@@ -589,7 +597,7 @@ export default defineComponent({
                         ? effects[effectIndex.value].prev
                         : mIndex > popupData.activeIndex
                         ? effects[effectIndex.value].next
-                        : effects[effectIndex.value].current),
+                        : (effects[effectIndex.value] as any).current),
                       ...(m.isAnimation ? {} : { 'transition-duration': '0s' })
                     }}
                     onClick={(e: Event) => {