动画效果

src/views/coursewarePlay/index.tsx

@@ -482,30 +482,30 @@ 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' }
       }
-      //风车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' }
-      // }
     ]
 
     const acitveTimer = ref()
@@ -515,6 +515,7 @@ export default defineComponent({
       handleStop()
       clearTimeout(acitveTimer.value)
       const oldIndex = popupData.activeIndex
+      checkedAnimation(popupData.activeIndex, index)
       popupData.activeIndex = index
 
       acitveTimer.value = setTimeout(() => {
@@ -537,9 +538,9 @@ export default defineComponent({
             })
           }
         }
-        const _effectIndex = effectIndex.value + 1
-        effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
-        checkedAnimation(popupData.activeIndex, oldIndex)
+        // const _effectIndex = effectIndex.value + 1
+        // effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
+        
       }, activeData.isAnimation ? 800 : 0)
     }
 
@@ -548,12 +549,15 @@ export default defineComponent({
       const item = data.itemList[index]
       const oldItem = data.itemList[oldIndex!]
       if (oldItem) {
-        activeData.isAnimation =
-          oldItem.knowledgePointId != item.knowledgePointId
-            ? true
-            : item?.adviseStudyTimeSecond < 8
-            ? false
-            : true
+        if(oldItem.knowledgePointId != item.knowledgePointId){
+          activeData.isAnimation = true
+          return
+        }
+        if (item?.adviseStudyTimeSecond < 8 || oldItem?.adviseStudyTimeSecond < 8) {
+          activeData.isAnimation = false
+        } else {
+          activeData.isAnimation = true
+        }
       } else {
         activeData.isAnimation = item?.adviseStudyTimeSecond < 8 ? false : true
       }
@@ -754,18 +758,14 @@ export default defineComponent({
         >
           <div class={styles.backBtn} onClick={() => goback()}>
             <Icon name={iconBack} />
-            返回
+            返回 (动画{effectIndex.value})
           </div>
           <div
             class={styles.menu}
             onClick={() => {
-              // if (showIndex.value > 0) {
-              //   effectIndex.value =
-              //     effectIndex.value < effects.length - 1 ? effectIndex.value + 1 : 0
-              // } else {
-              //   showIndex.value += 1
-              // }
-              // setModelOpen()
+              const _effectIndex = effectIndex.value + 1
+              effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
+              setModelOpen()
             }}
           >
             {popupData.tabName}