优化列表展开动画

src/renderer/components/material/Select.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-  div(:class="$style.select")
+  div(:class="[$style.select, show ? $style.active : '']")
     div(:class="$style.label" ref="dom_btn" @click="handleShow") {{value ? itemName ? list.find(l => l.id == value).name : value : ''}}
-    ul(:class="$style.list" ref="dom_list" :style="listStyle")
+    ul(:class="$style.list")
       li(v-for="item in list" @click="handleClick(itemKey ? item[itemKey] : item)") {{itemName ? item[itemName] : item}}
 </template>
 
@@ -28,25 +28,8 @@ export default {
   data() {
     return {
       show: false,
-      listStyle: {
-        height: 0,
-        opacity: 0,
-      },
     }
   },
-  watch: {
-    show(n) {
-      this.$nextTick(() => {
-        if (n) {
-          this.listStyle.height = this.$refs.dom_list.scrollHeight + 'px'
-          this.listStyle.opacity = 1
-        } else {
-          this.listStyle.height = 0
-          this.listStyle.opacity = 0
-        }
-      })
-    },
-  },
   mounted() {
     document.addEventListener('click', this.handleHide)
   },
@@ -80,6 +63,13 @@ export default {
 .select {
   font-size: 12px;
   position: relative;
+
+  &.active {
+    .list {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+  }
 }
 
 .label {
@@ -110,10 +100,11 @@ export default {
   border-left: 2px solid @color-tab-border-bottom;
   border-bottom-left-radius: 4px;
   background-color: @color-theme_2;
-  overflow: hidden;
   opacity: 0;
+  transform: scaleY(0);
+  transform-origin: 0 0 0;
   transition: .25s ease;
-  transition-property: height, opacity;
+  transition-property: transform, opacity;
   z-index: 10;
 
   li {

src/renderer/components/material/TagList.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  div(:class="$style.tagList")
+  div(:class="[$style.tagList, show ? $style.active : '']")
     div(:class="$style.label" ref="dom_btn" @click="handleShow")
       span {{value.name}}
-      div(:class="[$style.icon, show ? $style.active : '']")
+      div(:class="$style.icon")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
           use(xlink:href='#icon-down')
-    div.scroll(:class="$style.list" @click.stop ref="dom_list" :style="listStyle")
+    div.scroll(:class="$style.list" @click.stop ref="dom_list")
       div(:class="$style.tag" @click="handleClick(null)") 默认
       dl(v-for="type in list")
         dt(:class="$style.type") {{type.name}}
@@ -29,30 +29,8 @@ export default {
   data() {
     return {
       show: false,
-      listStyle: {
-        height: 0,
-        opacity: 0,
-      },
     }
   },
-  watch: {
-    show(n) {
-      this.$nextTick(() => {
-        if (n) {
-          let sh = this.$refs.dom_list.scrollHeight
-          this.listStyle.height = (sh > 250 ? 250 : sh) + 'px'
-          this.listStyle.opacity = 1
-          this.listStyle.overflow = 'auto'
-        } else {
-          this.listStyle.height = 0
-          this.listStyle.opacity = 0
-        }
-      })
-    },
-    list() {
-      this.$refs.dom_list.scrollTop = 0
-    },
-  },
   mounted() {
     document.addEventListener('click', this.handleHide)
   },
@@ -93,6 +71,20 @@ export default {
 .tag-list {
   font-size: 12px;
   position: relative;
+
+  &.active {
+    .label {
+      .icon {
+        svg{
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .list {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
 }
 
 .label {
@@ -121,11 +113,6 @@ export default {
       transition: transform .2s ease;
       transform: rotate(0);
     }
-    &.active {
-      svg{
-        transform: rotate(180deg);
-      }
-    }
   }
 
   &:hover {
@@ -145,10 +132,13 @@ export default {
   border-right: 2px solid @color-tab-border-bottom;
   border-bottom-right-radius: 5px;
   background-color: @color-theme_2-background_2;
-  overflow: hidden;
   opacity: 0;
+  transform: scaleY(0);
+  overflow-y: auto;
+  transform-origin: 0 0 0;
+  max-height: 250px;
   transition: .25s ease;
-  transition-property: height, opacity;
+  transition-property: transform, opacity;
   z-index: 10;
   padding: 10px;
   box-sizing: border-box;