课件播放0.9

src/views/coursewarePlay/play.tsx

@@ -393,8 +393,8 @@ export default defineComponent({
       }
     }
 
-    const effectIndex = ref(0)
     const showIndex = ref(-4)
+    const effectIndex = ref(0)
     const effects = [
       {
         prev: {
@@ -427,6 +427,29 @@ export default defineComponent({
         next: {
           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
+        }
+      },
+      //翻页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' }
       }
     ]
 
@@ -500,7 +523,7 @@ export default defineComponent({
                         ? effects[effectIndex.value].prev
                         : mIndex > popupData.activeIndex
                         ? effects[effectIndex.value].next
-                        : ''
+                        : effects[effectIndex.value].current
                     }
                     onClick={(e: Event) => {
                       e.stopPropagation()
@@ -651,12 +674,18 @@ export default defineComponent({
             <Icon name={iconBack} />
             返回
           </div>
-          <div class={styles.menu} onClick={() => {
-            showIndex.value +=1
-            if(showIndex.value > 0){
-              effectIndex.value = effectIndex.value > 2 ? 0 : (effectIndex.value + 1)
-            }
-          }}>{popupData.tabName} {showIndex.value > 0 ? `动画${effectIndex.value}` : ''}</div>
+          <div
+            class={styles.menu}
+            onClick={() => {
+              showIndex.value += 1
+              if (showIndex.value > 0) {
+                effectIndex.value = effectIndex.value >= effects.length ? 0 : effectIndex.value + 1
+              }
+              setModelOpen()
+            }}
+          >
+            {popupData.tabName} {showIndex.value > 0 ? `动画${effectIndex.value}` : ''}
+          </div>
           {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
         </div>