update

src/view/student/trainChapter/css/animationEvent.less

@@ -1,34 +0,0 @@
-// @keyframes loadGo {
-//     0% {
-//         -webkit-transform: rotateY(270deg);
-//         -moz-transform: rotateY(270deg);
-//         transform: rotateY(270deg);
-//     }
-//     100% {
-//         -webkit-transform: rotateY(360deg);
-//         -moz-transform: rotateY(360deg);
-//         transform: rotateY(360deg);
-//     }
-// }
-
-@keyframes loadGo {
-    0% {
-        -webkit-transform: rotateY(270deg);
-        -moz-transform: rotateY(270deg);
-        transform: rotateY(270deg);
-    }
-    100% {
-        -webkit-transform: rotateY(360deg);
-        -moz-transform: rotateY(360deg);
-        transform: rotateY(360deg);
-    }
-}
-
-
-
-
-
-
-
-
-

src/view/student/trainChapter/css/animationEvent.scss

@@ -0,0 +1,91 @@
+// @keyframes loadGo {
+//     0% {
+//         -webkit-transform: rotateY(270deg);
+//         -moz-transform: rotateY(270deg);
+//         transform: rotateY(270deg);
+//     }
+//     100% {
+//         -webkit-transform: rotateY(360deg);
+//         -moz-transform: rotateY(360deg);
+//         transform: rotateY(360deg);
+//     }
+// }
+
+@keyframes menuLookOpen {
+    0% {
+        left: 0rem;
+    }
+    100% {
+        left: 23.5rem;
+    }
+}
+
+.menuLookOpenEvent {
+
+    // 播放一次动画
+    // animation: rightToLeftExit 0.5s linear 1;
+
+    // 播放动画后停留在最后一帧
+    animation: menuLookOpen 0.5s;
+    animation-fill-mode: forwards;
+
+}
+
+@keyframes menuLookExit {
+    0% {
+        left: 23.5rem;
+    }
+    100% {
+        left: 0rem;
+    }
+}
+
+.menuLookExitEvent {
+
+    // 播放一次动画
+    // animation: rightToLeftExit 0.5s linear 1;
+
+    // 播放动画后停留在最后一帧
+    animation: menuLookExit 0.5s;
+    animation-fill-mode: forwards;
+
+}
+
+@keyframes menuLeftOpen {
+    0% {
+        left: -30rem;
+    }
+    100% {
+        left: 2.28rem;
+    }
+}
+
+.menuLeftOpenEvent {
+    
+    // 播放动画后停留在最后一帧
+    animation: menuLeftOpen 0.5s;
+    animation-fill-mode: forwards;
+
+}
+
+@keyframes menuLeftExit {
+    0% {
+        left: 2.28rem;
+    }
+    100% {
+        left: -30rem;
+    }
+}
+
+.menuLeftExitEvent {
+
+    // 播放动画后停留在最后一帧
+    animation: menuLeftExit 0.8s;
+    animation-fill-mode: forwards;
+
+}
+
+
+
+
+

src/view/student/trainChapter/trainChapter.vue

@@ -41,7 +41,7 @@
                 </div> -->
 
                 <!-- 新的左侧菜单 -->
-                <div class="menuLeft" >
+                <div :class="'menuLeft ' + (menuLeftLook == true ? 'menuLeftOpenEvent' : 'menuLeftExitEvent')" >
                     <div class="menuTitle" >
                         <div class="logoLeft"></div>
                         <div class="txtRight">知识学习知识学习知识学习</div>
@@ -52,7 +52,7 @@
 
                     </div>
                 </div>
-                <div :class="'menuLook ' + (menuLeftLook == true ? '' : 'menuLookExit')"
+                <div :class="'menuLook ' + (menuLeftLook == true ? 'menuLookOpenEvent ' : 'menuLookExit menuLookExitEvent')"
                 @click="(menuLeftLook = menuLeftLook == true ? false : true)" ></div>
                 
                 <div v-if="state.currentChapter.type != 30" class="chapter-detail">
@@ -703,6 +703,8 @@ const callbackProgressQingXiCheAndQv = (json : any) => {
 
 </script>
 <style lang="scss" scoped>
+@use './css/animationEvent.scss';
+
 .chapter-container {
     position: absolute;
     width: 100%;
@@ -1068,7 +1070,7 @@ const callbackProgressQingXiCheAndQv = (json : any) => {
             background-size: 100% 100%;
         }
 
-        
+
 
 
     }