课件播放0.7

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

@@ -107,7 +107,7 @@ export default defineComponent({
       if (videoItem.value) {
         videoItem.value.once('loadedmetadata', (e: Event) => {
           changePlayBtn('play')
-          console.log('自动播放', item.value.autoPlay)
+          // console.log('自动播放', item.value.autoPlay)
           if (item.value.autoPlay && videoItem.value) {
             videoItem.value.play()
           }

src/views/coursewarePlay/play.module.less

@@ -100,6 +100,10 @@
   transition-property: transform, opacity, height;
   backface-visibility: hidden;
   overflow: hidden;
+  z-index: 1;
+  &.itemActive{
+    z-index: 10;
+  }
   video {
     width: 100%;
     height: 100%;
@@ -317,9 +321,15 @@
   }
 }
 
-.nextItem {
-  transform: translate3d(0, 0, -800px) rotateX(-180deg);
-}
-.preItem{
-  transform: translate3d(0, 0, -800px) rotateX(180deg);
-}
+// .preItem{
+//   transform: translate3d(0, 0, -800px) rotateX(180deg);
+// }
+// .nextItem {
+//   transform: translate3d(0, 0, -800px) rotateX(-180deg);
+// }
+// .preItem{
+//   transform: translate3d(-100%, 0, -800px);
+// }
+// .nextItem {
+//   transform: translate3d(100%, 0, -800px);
+// }

src/views/coursewarePlay/play.tsx

@@ -393,80 +393,39 @@ export default defineComponent({
       }
     }
 
+    const effectIndex = ref(0)
+    const showIndex = ref(-4)
     const effects = [
       {
         prev: {
-          shadow: true,
-          translate: [0, 0, -400]
+          transform: 'translate3d(0, 0, -800px) rotateX(180deg)'
         },
         next: {
-          translate: ['100%', 0, 0]
+          transform: 'translate3d(0, 0, -800px) rotateX(-180deg)'
         }
       },
       {
         prev: {
-          shadow: true,
-          translate: ['-120%', 0, -500]
+          transform: 'translate3d(-100%, 0, -800px)'
         },
         next: {
-          shadow: true,
-          translate: ['120%', 0, -500]
+          transform: 'translate3d(100%, 0, -800px)'
         }
       },
       {
         prev: {
-          shadow: true,
-          translate: ['-20%', 0, -1]
+          transform: 'translate3d(-50%, 0, -800px) rotateY(80deg)'
         },
         next: {
-          translate: ['100%', 0, 0]
+          transform: 'translate3d(50%, 0, -800px) rotateY(-80deg)'
         }
       },
       {
         prev: {
-          shadow: true,
-          translate: [0, 0, -800],
-          rotate: [-180, 0, 0]
+          transform: 'translate3d(-100%, 0, -800px) rotateY(-120deg)'
         },
         next: {
-          shadow: true,
-          translate: [0, 0, -800],
-          rotate: [180, 0, 0]
-        }
-      },
-      {
-        prev: {
-          shadow: true,
-          translate: ['-125%', 0, -800],
-          rotate: [0, 0, -90]
-        },
-        next: {
-          shadow: true,
-          translate: ['125%', 0, -800],
-          rotate: [0, 0, 90]
-        }
-      },
-      {
-        prev: {
-          shadow: true,
-          origin: 'right center',
-          translate: ['5%', 0, -200],
-          rotate: [0, -100, 0]
-        },
-        next: {
-          origin: 'left center',
-          translate: ['-5%', 0, -200],
-          rotate: [0, 100, 0]
-        }
-      },
-      {
-        prev: {
-          scale: 0.3,
-          opacity: 0.4
-        },
-        next: {
-          opacity: 0.4,
-          scale: 0.3
+          transform: 'translate3d(100%, 0, -800px) rotateY(120deg)'
         }
       }
     ]
@@ -500,7 +459,6 @@ export default defineComponent({
       }, 800)
     }
 
-    const swiperType = ref(effects[3])
     // 上一个知识点, 下一个知识点
     const handlePreAndNext = (type: string) => {
       if (type === 'up') {
@@ -536,12 +494,14 @@ export default defineComponent({
                 return isRender ? (
                   <div
                     key={'index' + mIndex}
-                    class={[
-                      styles.itemDiv,
-                      mIndex < popupData.activeIndex && styles.preItem,
-                      mIndex > popupData.activeIndex && styles.nextItem
-                    ]}
-                    style={{ zIndex: popupData.activeIndex == mIndex ? 10 : 1 }}
+                    class={[styles.itemDiv, popupData.activeIndex === mIndex && styles.itemActive]}
+                    style={
+                      mIndex < popupData.activeIndex
+                        ? effects[effectIndex.value].prev
+                        : mIndex > popupData.activeIndex
+                        ? effects[effectIndex.value].next
+                        : ''
+                    }
                     onClick={(e: Event) => {
                       e.stopPropagation()
                       clearTimeout(activeData.timer)
@@ -691,7 +651,12 @@ export default defineComponent({
             <Icon name={iconBack} />
             返回
           </div>
-          <div class={styles.menu}>{popupData.tabName}</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>
           {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
         </div>