From 8041617ea1eb96730261053c84f679050110b1ce Mon Sep 17 00:00:00 2001
From: dribble-njr <wzw15292257101@163.com>
Date: Thu, 9 Jan 2025 21:42:20 +0800
Subject: [PATCH] style: improve transition effects for PostSlider and
 RightSlider by a hack way

---
 src/components/CodemirrorEditor/PostSlider.vue  | 15 +++++++++------
 src/components/CodemirrorEditor/RightSlider.vue |  9 +++++++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/CodemirrorEditor/PostSlider.vue b/src/components/CodemirrorEditor/PostSlider.vue
index 6f2246c..727b384 100644
--- a/src/components/CodemirrorEditor/PostSlider.vue
+++ b/src/components/CodemirrorEditor/PostSlider.vue
@@ -57,13 +57,19 @@ function delPost() {
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenPostSlider,
       'w-50': store.isOpenPostSlider,
     }"
   >
-    <nav class="space-y-1 h-full overflow-auto p-2">
+    <nav
+      class="space-y-1 h-full overflow-auto p-2 transition-transform"
+      :class="{
+        'translate-x-100': store.isOpenPostSlider,
+        '-translate-x-full': !store.isOpenPostSlider,
+      }"
+    >
       <Dialog v-model:open="isOpen">
         <DialogTrigger as-child>
           <Button variant="outline" class="w-full" size="xs">
@@ -86,10 +92,7 @@ function delPost() {
         </DialogContent>
       </Dialog>
       <a
-        v-for="(post, index) in store.posts"
-        :key="post.title"
-        href="#"
-        :class="{
+        v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
           'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
           'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
         }"
diff --git a/src/components/CodemirrorEditor/RightSlider.vue b/src/components/CodemirrorEditor/RightSlider.vue
index 5cea23d..a871c27 100644
--- a/src/components/CodemirrorEditor/RightSlider.vue
+++ b/src/components/CodemirrorEditor/RightSlider.vue
@@ -40,13 +40,18 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenRightSlider,
       'w-100': store.isOpenRightSlider,
     }"
   >
-    <div class="space-y-4 h-full overflow-auto p-4">
+    <div
+      class="space-y-4 h-full overflow-auto p-4 transition-transform" :class="{
+        'translate-x-0': store.isOpenRightSlider,
+        'translate-x-full': !store.isOpenRightSlider,
+      }"
+    >
       <div class="space-y-2">
         <h2>主题</h2>
         <div class="grid grid-cols-3 justify-items-center gap-2">