Fix drawer open/close animation where height > width

client/src/styles/partials/generic/drawers.scss

@@ -31,20 +31,16 @@
     }
 
     .bd-drawer-contents {
+        // margin-top is set in JavaScript when the drawer is animating
+        // It still needs to be set here for it to animate
         transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
         transform: scaleY(0) translateY(0%);
-        margin-top: -50%;
+        margin-top: -100%;
         opacity: 0;
 
         > .bd-form-item:last-child > .bd-form-divider:last-child {
             display: none;
         }
-
-        &::after {
-            content: "";
-            display: block;
-            margin-top: 15px;
-        }
     }
 
     &.bd-drawer-open {
@@ -67,6 +63,12 @@
             transform: scaleY(1) translateY(0%);
             margin-top: 0%;
             opacity: 1;
+
+            &::after {
+                content: "";
+                display: block;
+                margin-top: 15px;
+            }
         }
     }
 }

client/src/ui/components/common/Drawer.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div :class="['bd-drawer', {'bd-drawer-open': open}]">
+    <div :class="['bd-drawer', {'bd-drawer-open': open, 'bd-animating': animating}]">
         <div class="bd-form-header bd-drawer-header" @click="() => open = !open">
             <span class="bd-form-header-text">{{ label }}</span>
             <span class="bd-form-header-button bd-drawer-open-button">
@@ -18,8 +18,8 @@
             </span>
         </div>
         <div class="bd-drawer-contents-wrap">
-            <div class="bd-drawer-contents">
+            <div class="bd-drawer-contents" ref="contents">
-                <slot />
+                <slot v-if="open || animating" />
             </div>
         </div>
     </div>
@@ -37,7 +37,21 @@
         },
         data() {
             return {
-                open: false
+                open: false,
+                animating: false,
+                timeout: null
+            }
+        },
+        watch: {
+            async open(open) {
+                this.animating = true;
+                const contents = this.$refs.contents;
+                contents.style.marginTop = 0 - contents.offsetHeight + 'px';
+                if (this.timeout) clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    contents.style.marginTop = null;
+                    this.animating = false;
+                }, 200);
             }
         }
     }