feat: added dropdown animation

antares-sql · May 22, 2022 · 5398964 · 5398964
1 parent 7c45203
commit 5398964
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/src/renderer/components/BaseSelect.vue b/src/renderer/components/BaseSelect.vue
@@ -32,11 +32,9 @@
          >
          <span v-if="searchable && !isOpen || !searchable">{{ currentOptionLabel }}</span>
       </div>
-      <Teleport
-         v-if="isOpen"
-         :to="dropdownContainer"
-      >
+      <Transition :name="animation">
          <div
+            v-if="isOpen"
             ref="optionList"
             :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
          >
@@ -65,13 +63,12 @@
                </li>
             </ul>
          </div>
-      </Teleport>
+      </Transition>
    </div>
 </template>
 
 <script>
 import { defineComponent, computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
-import { option } from 'yargs';
 
 export default defineComponent({
    name: 'BaseSelect',
@@ -119,9 +116,9 @@ export default defineComponent({
          type: Boolean,
          default: true
       },
-      dropdownContainer: {
+      animation: {
          type: String,
-         default: '#window-content'
+         default: 'fade-slide-down'
       },
       dropdownOffsets: {
          type: Object,
@@ -277,22 +274,20 @@ export default defineComponent({
       };
 
       const adjustListPosition = () => {
-         setTimeout(() => {
-            const element = el.value;
-            let { left, top } = element.getBoundingClientRect();
-            const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
-            top = top + element.clientHeight + offsetTop;
-            const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
-
-            if (!openBottom) {
-               top -= (offsetTop * 2 + element.clientHeight);
-               optionList.value.style.transform = 'translate(0, -100%)';
-            }
-
-            optionList.value.style.left = `${left + offsetLeft}px`;
-            optionList.value.style.top = `${top}px`;
-            optionList.value.style.minWidth = `${element.clientWidth}px`;
-         }, 100);
+         const element = el.value;
+         let { left, top } = element.getBoundingClientRect();
+         const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
+         top = top + element.clientHeight + offsetTop;
+         const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
+
+         if (!openBottom) {
+            top -= (offsetTop * 2 + element.clientHeight);
+            optionList.value.style.transform = 'translate(0, -100%)';
+         }
+
+         optionList.value.style.left = `${left + offsetLeft}px`;
+         optionList.value.style.top = `${top}px`;
+         optionList.value.style.minWidth = `${element.clientWidth}px`;
       };
 
       const keyArrows = (direction) => {
@@ -330,6 +325,14 @@ export default defineComponent({
 
       onMounted(() => {
          window.addEventListener('resize', adjustListPosition);
+         nextTick(() => {
+            // fix position when the component is created and opened at the same time
+            if (isOpen.value) {
+               setTimeout(() => {
+                  adjustListPosition();
+               }, 50);
+            }
+         });
       });
       onUnmounted(() => {
          window.removeEventListener('resize', adjustListPosition);

diff --git a/src/renderer/scss/_transitions.scss b/src/renderer/scss/_transitions.scss
@@ -1,3 +1,16 @@
+.fade-slide-down-enter-active,
+.fade-slide-down-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.fade-slide-down-enter-from,
+.fade-slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-1.8rem);
+}
+
 .slide-fade-enter-active {
   transition: all 0.3s ease;
 }