左侧菜单动画

src/features/mark/MarkHistory.vue

@@ -1,19 +1,8 @@
 <template>
+  <div
     class="history-container tw-px-1"
     :class="[store.historyOpen ? 'show' : 'hide']"
   >
-    <!-- <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-lg main-text-color">回评</div>
-      <a-button
-        class="tw-content-end"
-        shape="circle"
-        @click="store.historyOpen = false"
-      >
-        <template #icon><CloseOutlined /></template>
-      </a-button>
-    </div> -->
-    <!-- :value="secretNumberInput"
-        @change="updateSecretNumber" -->
     <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
       <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">回评</div>
       <input
@@ -61,7 +50,7 @@
         />
       </div>
     </div>
-    <a-spin :spinning="loading" size="large" tip="Loading...">
+    <a-spin :spinning="loading" size="large" tip="Loading..." delay="0.5">
       <div style="margin-bottom: -40px; padding-bottom: 40px">
         <div v-for="(task, index) of store.historyTasks" :key="index">
           <div
@@ -297,13 +286,13 @@ function searchHistoryTask() {
   font-size: 12px;
   overflow-y: auto;
   height: calc(100vh - 56px);
-  /* animation: width 5s ease-in-out; */
+  transition: margin-right 0.5s;
 }
 .history-container.show {
-  display: block;
+  margin-right: 0;
 }
 .history-container.hide {
-  display: none;
+  margin-right: -290px;
 }
 
 .current-task {