更换动画

src/assets/styles/index.scss

@@ -53,42 +53,42 @@ ul li {
 .basketballv1 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/basketballv1.png');
+      background-image: url('../static/images/train/basketballv1.png');
     }
   }
 }
 .footballv1 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/footballv1.png');
+      background-image: url('../static/images/train/footballv1.png');
     }
   }
 }
 .heartbeat {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/heartbeat.png');
+      background-image: url('../static/images/train/heartbeat.png');
     }
   }
 }
 .jump {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/jump.png');
+      background-image: url('../static/images/train/jump.png');
     }
   }
 }
 .jumpingjack {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/jumpingjack.png');
+      background-image: url('../static/images/train/jumpingjack.png');
     }
   }
 }
 .jumprope {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/jumprope.png');
+      background-image: url('../static/images/train/jumprope.png');
     }
   }
 }
@@ -96,7 +96,7 @@ ul li {
 .longjump {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/longjump.png');
+      background-image: url('../static/images/train/longjump.png');
     }
   }
 }
@@ -104,7 +104,7 @@ ul li {
 .pullup {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/pullup.png');
+      background-image: url('../static/images/train/pullup.png');
     }
   }
 }
@@ -112,7 +112,7 @@ ul li {
 .run10x4 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run10x4.png');
+      background-image: url('../static/images/train/run10x4.png');
     }
   }
 }
@@ -120,7 +120,7 @@ ul li {
 .run15x4 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run15x4.png');
+      background-image: url('../static/images/train/run15x4.png');
     }
   }
 }
@@ -128,7 +128,7 @@ ul li {
 .run50 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run50.png');
+      background-image: url('../static/images/train/run50.png');
     }
   }
 }
@@ -136,7 +136,7 @@ ul li {
 .run50x8 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run50x8.png');
+      background-image: url('../static/images/train/run50x8.png');
     }
   }
 }
@@ -144,7 +144,7 @@ ul li {
 .run100 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run100.png');
+      background-image: url('../static/images/train/run100.png');
     }
   }
 }
@@ -152,7 +152,7 @@ ul li {
 .run200 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run200.png');
+      background-image: url('../static/images/train/run200.png');
     }
   }
 }
@@ -160,7 +160,7 @@ ul li {
 .run400 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run400.png');
+      background-image: url('../static/images/train/run400.png');
     }
   }
 }
@@ -168,7 +168,7 @@ ul li {
 .run800 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run800.png');
+      background-image: url('../static/images/train/run800.png');
     }
   }
 }
@@ -176,7 +176,7 @@ ul li {
 .run1000 {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/run1000.png');
+      background-image: url('../static/images/train/run1000.png');
     }
   }
 }
@@ -184,7 +184,7 @@ ul li {
 .shotput {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/shotput.png');
+      background-image: url('../static/images/train/shotput.png');
     }
   }
 }
@@ -192,7 +192,7 @@ ul li {
 .sidepullup {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/sidepullup.png');
+      background-image: url('../static/images/train/sidepullup.png');
     }
   }
 }
@@ -200,7 +200,7 @@ ul li {
 .situp {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/situp.png');
+      background-image: url('../static/images/train/situp.png');
     }
   }
 }
@@ -208,7 +208,7 @@ ul li {
 .skiprope {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/skiprope.png');
+      background-image: url('../static/images/train/skiprope.png');
     }
   }
 }
@@ -216,7 +216,7 @@ ul li {
 .solidball {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/solidball.png');
+      background-image: url('../static/images/train/solidball.png');
     }
   }
 }
@@ -224,7 +224,7 @@ ul li {
 .trijump {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/trijump.png');
+      background-image: url('../static/images/train/trijump.png');
     }
   }
 }
@@ -232,7 +232,7 @@ ul li {
 .verticaljump {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/verticaljump.png');
+      background-image: url('../static/images/train/verticaljump.png');
     }
   }
 }
@@ -240,7 +240,7 @@ ul li {
 .volleyball {
   .el-loading-spinner {
     &::before {
-      background-image: url('static/images/train/volleyball.png');
+      background-image: url('../static/images/train/volleyball.png');
     }
   }
 }

src/components/ChooseStudent/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+  <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
     <div class="mask" v-if="optionWindow.show"></div>
-  </transition>
-  <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+  </Transition>
+  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
     <div class="optionWindow" v-if="optionWindow.show">
       <div class="box">
         <div class="top">
@@ -57,7 +57,7 @@
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 <script setup lang="ts">
 import useAppStore from '@/store/modules/app';

src/components/FaceWindow/index.vue

@@ -1,10 +1,10 @@
 <template>
 
   <div>
-    <!-- <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+    <!-- <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
       <div class="mask" v-show="faceState"></div>
-    </transition> -->
-    <transition :enter-active-class="proxy?.animate.face.enter"
+    </Transition> -->
+    <Transition :enter-active-class="proxy?.animate.face.enter"
       :leave-active-class="direction == 'right' ? proxy?.animate.face.leave3 : faceCheckStu.student_id ? proxy?.animate.face.leave1 : proxy?.animate.face.leave2">
       <div class="confirmDiaBg" v-show="faceState">
         <div class="confirmDiaWindow">
@@ -23,7 +23,7 @@
           </div>
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 
 </template>

src/components/MultipleItem/index.vue

@@ -2,14 +2,14 @@
   <div class="li">
     <div class="userInfo" @click="getChooseStudent">
       <div class="userInfo-center">
-        <transition :enter-active-class="proxy?.animate.dialog.enter">
+        <Transition :enter-active-class="proxy?.animate.dialog.enter">
           <div class="pic" :class="{ 'pic2': faceCheckStu.student_id }" v-if="faceCheckStu.student_id"> <img
               :src="faceCheckStu.face_pic || faceCheckStu.logo_url" /></div>
           <div class="pic" v-else>
             <div class="area">{{ area }}</div>
             <img src="@/assets/images/test/profilePicture2.png" />
           </div>
-        </transition>
+        </Transition>
         <div class="name" :class="{ 'name2': faceCheckStu.student_id }">
           {{ faceCheckStu.student_id ? faceCheckStu.name : area ? "虚位以待" : "未启用" }}
         </div>

src/components/OptionWindow/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+    <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
       <div class="mask" v-if="optionWindow.show"></div>
-    </transition>
-    <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+    </Transition>
+    <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
       <div class="optionWindow" v-if="optionWindow.show">
         <div class="box">
           <div class="top">
@@ -94,7 +94,7 @@
           </div>
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 
 </template>

src/components/ReportWindow/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+  <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
     <div class="mask" v-if="reportWindow.show"></div>
-  </transition>
-  <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+  </Transition>
+  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
     <div class="reportWindow" v-if="reportWindow.show" @click.self="close">
       <div class="box">
         <div class="left">
@@ -115,7 +115,7 @@
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 <script setup lang="ts">
 import * as echarts from 'echarts';

src/layout/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-main">
     <router-view v-slot="{ Component, route }">
-      <transition :enter-active-class="proxy?.animate.page.enter">
+      <Transition :enter-active-class="proxy?.animate.page.enter">
         <component :is="Component" :key="route.path" />
-      </transition>
+      </Transition>
     </router-view>
   </div>
 </template>

src/utils/animate.ts

@@ -36,8 +36,9 @@ const report = {
   // leave: animatePrefix + 'animate__fadeOutRight'
 };
 
-const runList = {
-  enter: animatePrefix + 'animate__fadeInRight'
+const run = {
+  enter: animatePrefix + 'animate__fadeInRight',
+  leave: animatePrefix + 'animate__fadeOut'
 };
 
 const error = {
@@ -51,6 +52,6 @@ export default {
   page,
   foul,
   report,
-  runList,
+  run,
   error
 };

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <Header :showClose="false" :showTool="false" logoClass="logo2"></Header>
-    <transition :enter-active-class="proxy?.animate.error.enter">
+    <Transition :enter-active-class="proxy?.animate.error.enter">
       <div class="login-content" :key="key">
         <div class="login-content-center">
           <div class="login-title"> <img src="@/assets/images/login/login.png" /></div>
@@ -18,7 +18,7 @@
           </div>
         </div>
       </div>
-    </transition>
+    </Transition>
     <div class="erweima"> <img src="@/assets/images/login/erweima.png" />
       <span>扫码登录</span>
     </div>

src/views/ranking/index.vue

@@ -108,7 +108,7 @@
             <div class="btn-left" @click="getPrevious"></div>
             <div class="main-b-center">
               <div class="columns" v-for="(item, index) in studentList" :key="index">
-                <transition name="fade" mode="out-in">
+                <Transition name="fade" mode="out-in">
                   <ul v-if="item.length">
                     <li v-for="(items, indexs) in item" :key="indexs" @click="openReport(items)">
                       <div class="txt">
@@ -132,7 +132,7 @@
                       <span>暂无更多数据</span>
                     </div>
                   </div>
-                </transition>
+                </Transition>
               </div>
             </div>
             <div class="btn-right" @click="getNext"></div>

src/views/train/multiple.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <Header @confirmExit="confirmExit"></Header>
-    <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+    <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
       <div class="time" :class="{ 'time1': styleType == 1, 'time2': styleType == 2, 'time3': styleType == 3 }"
         v-show="[42].includes(examState)">{{
           time.countdownNum
         }}</div>
-    </transition>
+    </Transition>
     <div class="main">
       <div class="testBox"
         :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
@@ -34,22 +34,22 @@
         {{ showReportList ? '关闭记录' : '测试记录' }}
       </div>
       <!--测试记录开始-->
-      <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+      <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
         <div class="mask mask2" v-show="showReportList" @click="getTestRecord"></div>
-      </transition>
-      <transition :enter-active-class="proxy?.animate.report.enter" :leave-active-class="proxy?.animate.report.leave">
+      </Transition>
+      <Transition :enter-active-class="proxy?.animate.report.enter" :leave-active-class="proxy?.animate.report.leave">
         <div class="main-right" v-show="showReportList">
           <ReportList ref="reportListRef" :parameter="parameter" :showQRCode="false" />
         </div>
-      </transition>
+      </Transition>
       <!--测试记录结束-->
     </div>
     <!--倒计时开始-->
     <div>
-      <transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+      <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
         <div class="mask" v-show="examState == 43 && time.ready"></div>
-      </transition>
-      <transition :enter-active-class="proxy?.animate.face.enter" :leave-active-class="proxy?.animate.face.leave2">
+      </Transition>
+      <Transition :enter-active-class="proxy?.animate.face.enter" :leave-active-class="proxy?.animate.face.leave2">
         <div class="confirmDiaBg" v-show="examState == 43 && time.ready">
           <div class="confirmDiaWindow">
             <div class="readyBox">
@@ -58,7 +58,7 @@
             </div>
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
     <!--倒计时结束-->
   </div>

src/views/train/run.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <Header @confirmExit="confirmExit"></Header>
-    <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+    <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
       <div class="time" v-show="[42].includes(examState)">{{
         countdownNumFormat
-      }}</div>
-    </transition>
+        }}</div>
+    </Transition>
     <div class="main">
       <template v-if="isLongRun">
         <!--长跑-->
@@ -14,7 +14,8 @@
           <swiper-slide v-for="(items, indexs) in testListArr " :key="indexs">
             <div class="main-left main-left2">
               <div class="trackItem">
-                <transition-group :enter-active-class="proxy?.animate.runList.enter">
+                <TransitionGroup :enter-active-class="proxy?.animate.run.enter"
+                  :leave-active-class="proxy?.animate.run.leave">
                   <div v-for="(item, index) in items" :key="indexs + '_' + index" class="li">
                     <div class="left">
                       <div class="track">{{ (index + 1) + (8 * indexs) }}</div>
@@ -43,7 +44,7 @@
                     </div>
                     <div class="close" @click="close(item)" v-if="examState == 41"></div>
                   </div>
-                </transition-group>
+                </TransitionGroup>
               </div>
             </div>
           </swiper-slide>
@@ -53,7 +54,7 @@
         <!--短跑-->
         <div class="main-left">
           <div class="trackItem">
-            <transition-group :enter-active-class="proxy?.animate.runList.enter">
+            <TransitionGroup :enter-active-class="proxy?.animate.run.enter">
               <div v-for="(item, index) in faceStudentList" :key="index" class="li">
                 <div class="left">
                   <div class="track">{{ item.track }}</div>
@@ -85,7 +86,7 @@
                   异常
                 </div>
               </div>
-            </transition-group>
+            </TransitionGroup>
           </div>
         </div>
         <div class="main-right">

src/views/train/test.vue

@@ -17,12 +17,12 @@
             </div>
           </div>
           <div class="top-right">
-            <transition :enter-active-class="proxy?.animate.dialog.enter"
+            <Transition :enter-active-class="proxy?.animate.dialog.enter"
               :leave-active-class="proxy?.animate.dialog.leave">
               <div class="time" v-show="needStart && [42].includes(examState)">{{
                 time.countdownNum
-                }}</div>
-            </transition>
+              }}</div>
+            </Transition>
             <div class="tips" v-if="examState == 41">
               <img v-if="parameter.gesture" src="@/assets/images/test/ready1.png" />
               <img v-if="!parameter.gesture" src="@/assets/images/test/ready2.png" />
@@ -48,13 +48,13 @@
               </div>
             </div>
             <div class="foulBox" v-if="examState == 42 && backReason.length">
-              <transition :enter-active-class="proxy?.animate.mask.enter"
+              <Transition :enter-active-class="proxy?.animate.mask.enter"
                 :leave-active-class="proxy?.animate.mask.leave">
                 <div class="foul" v-show="backReasonStr ? true : false">
                   <div class="lable">!</div>
                   <div class="value">{{ backReasonStr }}</div>
                 </div>
-              </transition>
+              </Transition>
             </div>
 
             <div v-if="examState == 43 && time.ready">