SelectBox: animacja zwijania/rozwijania

src/components/Global/SelectBox.vue

@@ -5,15 +5,15 @@
         {{ computedSelectedItem.value }}
       </button>
 
+      <ul class="options" :ref="(el) => (listRef = el)">
+        <li class="option" v-for="(item, i) in itemList" :key="item.id">
           <transition
-        name="expand"
+            name="unfold"
-        @enter="expandEnter"
+            :style="`
-        @after-enter="expandAfterEnter"
+            --delay-in: ${i * 55}ms; 
-        @leave="expandLeave"
+            --delay-out: ${(itemList.length - 1 - i) * 55}ms`"
           >
-        <ul class="options" v-show="listOpen" :ref="(el) => (listRef = el)">
+            <label :for="item.id" v-if="listOpen">
-          <li class="option" v-for="item in itemList" :key="item.id">
-            <label :for="item.id">
               <input
                 type="button"
                 :id="item.id"
@@ -28,9 +28,9 @@
                 {{ item.value }}
               </span>
             </label>
+          </transition>
         </li>
       </ul>
-      </transition>
     </div>
 
     <div class="arrow">
@@ -83,20 +83,12 @@ export default defineComponent({
       );
     });
 
-    const computedHeight = computed(() =>
-      listRef.value ? getComputedStyle(listRef.value).height : 0
-    );
-
-    const buttonFocused = computed(() => document.activeElement);
-
     return {
       computedSelectedItem,
       listOpen,
       selectedItem,
       listRef,
       buttonRef,
-      computedHeight,
-      buttonFocused,
       activeEl,
     };
   },
@@ -109,40 +101,16 @@ export default defineComponent({
       this.$emit("selected", item);
     },
 
-    toggleBox() {
+    toggleBox(e: Event) {
       this.listOpen = !this.listOpen;
+
+      if (!this.listOpen) (e.target as HTMLButtonElement).blur();
     },
 
     clickedOutside() {
       this.listOpen = false;
       this.buttonRef?.blur();
     },
-
-    expandEnter(el: HTMLElement) {
-      el.style.height = "auto";
-
-      const currentHeight = getComputedStyle(el).height;
-
-      el.style.height = "0";
-
-      setTimeout(() => {
-        el.style.height = currentHeight;
-      }, 50);
-    },
-
-    expandAfterEnter(el: HTMLElement) {
-      el.style.height = "auto";
-    },
-
-    expandLeave(el: HTMLElement) {
-      el.style.height = getComputedStyle(el).height;
-
-      getComputedStyle(el);
-
-      setTimeout(() => {
-        el.style.height = "0";
-      }, 50);
-    },
   },
 });
 </script>
@@ -150,11 +118,24 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "../../styles/variables.scss";
 
-.expand {
+.unfold {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.85);
+  }
+
   &-enter-active,
   &-leave-active {
-    transition: height 150ms ease-out;
+    transition: all 110ms ease-out;
-    overflow: hidden;
+  }
+
+  &-enter-active {
+    transition-delay: var(--delay-in);
+  }
+
+  &-leave-active {
+    transition-delay: var(--delay-out);
   }
 }
 
@@ -177,31 +158,6 @@ export default defineComponent({
   pointer-events: none;
 }
 
-.select-box_content {
-  position: relative;
-  margin: 0 auto;
-
-  height: 100%;
-
-  min-width: 10em;
-
-  text-align: center;
-}
-
-.options {
-  position: absolute;
-  top: 100%;
-  left: 0;
-
-  height: auto;
-
-  z-index: 10;
-
-  width: 100%;
-
-  margin-top: 0.25em;
-}
-
 button.selected {
   background: #333;
   color: white;
@@ -224,7 +180,33 @@ button.selected {
   }
 }
 
-input {
+.select-box_content {
+  position: relative;
+  margin: 0 auto;
+
+  height: 100%;
+
+  min-width: 10em;
+
+  text-align: center;
+}
+
+ul.options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  height: auto;
+
+  z-index: 10;
+
+  width: 100%;
+
+  margin-top: 0.25em;
+}
+
+li.option {
+  input {
     position: absolute;
     top: 0;
     left: 0;
@@ -238,17 +220,21 @@ input {
       color: $accentCol;
       font-weight: bold;
     }
-}
+  }
 
-label {
+  &:last-child label {
+    border-radius: 0 0 1em 1em;
+  }
+
+  label {
     position: relative;
 
     display: inline-block;
-  background-color: hsla(0, 0%, 0%, 0.85);
+    background-color: hsla(0, 0%, 15%, 0.95);
 
     &:hover,
     &:focus {
-    background-color: hsla(0, 0%, 20%, 0.85);
+      background-color: hsla(0, 0%, 20%, 0.95);
     }
 
     padding: 0.75em 0;
@@ -256,5 +242,6 @@ label {
     width: 100%;
 
     cursor: pointer;
+  }
 }
 </style>