feat: 为侧栏添加渐入渐出动效

src/cpns/ClipFullData.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="clip-full-data">
-    <div class="clip-full" v-show="isShow">
-      <div v-if="fullData.type === 'text'">
-        <div v-text="fullData.data"></div>
+    <Transition name="fade">
+      <div class="clip-full" v-show="isShow">
+        <div v-if="fullData.type === 'text'">
+          <div v-text="fullData.data"></div>
+        </div>
+        <div v-else>
+          <FileList :data="fullData.data"></FileList>
+        </div>
       </div>
-      <div v-else>
-        <FileList :data="fullData.data"></FileList>
-      </div>
-    </div>
+    </Transition>
+    <div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
   </div>
-  <div class="clip-overlay" v-show="isShow" @click="onOverlayClick"></div>
 </template>
 
 <script setup>
@@ -32,4 +34,13 @@ const onOverlayClick = () => emit('onOverlayClick')
 
 <style lang="less" scoped>
 @import '../style';
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>