renderer: fix tab slide transition for Comment and ColorPicker

Rocket1184 · Jul 19, 2023 · 487908b · 487908b
1 parent c2f0379
commit 487908b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 34 deletions.
diff --git a/src/renderer/page/Comment/Comment.vue b/src/renderer/page/Comment/Comment.vue
@@ -15,9 +15,8 @@
                 <span>写评论</span>
             </mu-button>
         </mu-tabs>
-        <div class="list-wrapper">
-            <transition mode="out-in"
-                :name="transitionName">
+        <div class="list-wrapper slide-anim-container">
+            <transition :name="transitionName">
                 <keep-alive>
                     <CommentList :key="tab"
                         :thread="thread"

diff --git a/src/renderer/page/Settings/ColorPicker.vue b/src/renderer/page/Settings/ColorPicker.vue
@@ -4,34 +4,35 @@
         :width="500"
         :open="open"
         @close="handleClose">
-        <transition :name="transitionName"
-            mode="out-in">
-            <div :key="activeGroup"
-                class="buttons-wrapper">
-                <template v-if="activeGroup < 0">
-                    <mu-button v-for="(group, index) in ColorGroups"
-                        fab
-                        :color="group.primary"
-                        :key="group.primary"
-                        @click="handleGroup(index)">
-                    </mu-button>
-                </template>
-                <template v-else>
-                    <mu-button class="color-picker__back"
-                        fab
-                        color="transparent"
-                        textColor="grey"
-                        @click="handleGroup(-1)">
-                        <mu-icon value="arrow_back"></mu-icon>
-                    </mu-button>
-                    <mu-button v-for="color in ColorGroups[activeGroup].varieties"
-                        fab
-                        :key="color"
-                        :color="color"
-                        @click="handleSelect(color)"></mu-button>
-                </template>
-            </div>
-        </transition>
+        <div class="slide-anim-container">
+            <transition :name="transitionName">
+                <div :key="activeGroup"
+                    class="buttons-wrapper">
+                    <template v-if="activeGroup < 0">
+                        <mu-button v-for="(group, index) in ColorGroups"
+                            fab
+                            :color="group.primary"
+                            :key="group.primary"
+                            @click="handleGroup(index)">
+                        </mu-button>
+                    </template>
+                    <template v-else>
+                        <mu-button class="color-picker__back"
+                            fab
+                            color="transparent"
+                            textColor="grey"
+                            @click="handleGroup(-1)">
+                            <mu-icon value="arrow_back"></mu-icon>
+                        </mu-button>
+                        <mu-button v-for="color in ColorGroups[activeGroup].varieties"
+                            fab
+                            :key="color"
+                            :color="color"
+                            @click="handleSelect(color)"></mu-button>
+                    </template>
+                </div>
+            </transition>
+        </div>
         <template #actions>
             <mu-button flat
                 color="primary"
@@ -102,8 +103,10 @@ export default {
 
 <style lang="less">
 .color-picker {
+    .slide-anim-container {
+        min-height: 192px;
+    }
     .buttons-wrapper {
-        height: 192px;
         .color-picker__back {
             vertical-align: top;
         }

diff --git a/src/renderer/transition.css b/src/renderer/transition.css
@@ -4,12 +4,16 @@
     position: relative;
 }
 
-.slide-left-enter-active,
 .slide-left-leave-active,
-.slide-right-enter-active,
 .slide-right-leave-active {
     position: absolute;
     width: 100%;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
     transition-duration: 0.3s;
     transition-property: transform, opacity;
     transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);