任务切换动画

src/features/mark/CommonMarkBody.vue

@@ -17,6 +17,7 @@
     <div
       v-else-if="store.setting.examType === 'SCAN_IMAGE'"
       :style="{ width: answerPaperScale }"
+      :class="[`rotate-board-${rotateBoard}`]"
     >
       <div
         v-for="(item, index) in sliceImagesWithTrackList"
@@ -105,6 +106,7 @@ const { dragContainer } = dragImage();
 // end: 图片拖动
 
 const { addTimeout } = useTimers();
+let rotateBoard = ref(0);
 
 // start: 缩略图定位
 watch(
@@ -267,7 +269,15 @@ async function processSliceConfig() {
     });
     accumTopHeight = accumBottomHeight;
   }
-  sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
+  // console.log("render: ", store.currentTask.secretNumber);
+  rotateBoard.value = 1;
+  setTimeout(() => {
+    sliceImagesWithTrackList.splice(0);
+    sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
+    setTimeout(() => {
+      rotateBoard.value = 0;
+    }, 300);
+  }, 300);
 }
 
 async function processSplitConfig() {
@@ -395,7 +405,14 @@ async function processSplitConfig() {
       }
     }
   }
-  sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
+  rotateBoard.value = 1;
+  addTimeout(() => {
+    sliceImagesWithTrackList.splice(0);
+    sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
+    addTimeout(() => {
+      rotateBoard.value = 0;
+    }, 300);
+  }, 300);
 }
 
 // should not render twice at the same time
@@ -414,7 +431,7 @@ const renderPaperAndMark = async () => {
   //   // console.log("revoke", s.url);
   //   URL.revokeObjectURL(s.url);
   // }
-  sliceImagesWithTrackList.splice(0);
+  // sliceImagesWithTrackList.splice(0);
   // check if have MarkResult for currentTask
   let markResult = store.currentMarkResult;
 
@@ -444,7 +461,7 @@ const renderPaperAndMark = async () => {
   }
 };
 
-watchEffect(renderPaperAndMark);
+// watchEffect(renderPaperAndMark);
 // 在阻止渲染的情况下，watchEffect收集不到 store.currentTask 的依赖，会导致本组件不再更新
 watch(
   () => store.currentTask,
@@ -625,4 +642,22 @@ const showBigImage = (event: MouseEvent) => {
   position: absolute;
   bottom: -5px;
 }
+
+@keyframes rotate {
+  0% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: rotateY(90deg);
+  }
+
+  100% {
+    transform: rotateY(0deg);
+    opacity: 0;
+  }
+}
+.rotate-board-1 {
+  animation: rotate 0.6s;
+}
 </style>