Merge pull request #94 from ToBinio/better-dropdown-transition

improve dropdown transitions
modrinth · Oct 11, 2023 · d1a0cd1 · d1a0cd1
2 parents 28b63ba + 323a74e
commit d1a0cd1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/lib/components/base/DropdownButton.vue b/lib/components/base/DropdownButton.vue
@@ -201,6 +201,12 @@ onBeforeUnmount(() => {
 
     .btn {
       height: 2.25rem;
+
+      transition: 0.05s;
+
+      &:not(.render-down):not(.render-up) {
+        transition-delay: 0.2s;
+      }
     }
   }
 

diff --git a/lib/components/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue
@@ -210,6 +210,12 @@ const isChildOfDropdown = (element) => {
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
+    transition: 0.05s;
+
+    &:not(.render-down):not(.render-up) {
+      transition-delay: 0.2s;
+    }
+
     &.disabled {
       cursor: not-allowed;
       filter: grayscale(50%);
@@ -232,6 +238,7 @@ const isChildOfDropdown = (element) => {
 
     .arrow {
       transition: transform 0.2s ease;
+
       &.rotate {
         transform: rotate(180deg);
       }

diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
@@ -316,6 +316,8 @@ const isChildOfDropdown = (element) => {
   box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent !important;
   width: 100%;
 
+  transition: 0.05s;
+
   &:focus {
     &.down {
       border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
@@ -325,5 +327,9 @@ const isChildOfDropdown = (element) => {
       border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
     }
   }
+
+  &:not(:focus) {
+    transition-delay: 0.2s;
+  }
 }
 </style>