fixes related types slider animation

apostrophecms · Jan 7, 2025 · cd5cd9e · cd5cd9e
1 parent e7638c3
commit cd5cd9e
Showing 1 changed file with 11 additions and 19 deletions.
diff --git a/ui/apos/components/AposExportModal.vue b/ui/apos/components/AposExportModal.vue
@@ -65,8 +65,8 @@
           </div>
 
           <transition
-            name="fade"
-            :duration="200"
+            name="slide"
+            duration="200"
           >
             <div
               v-show="!relatedDocumentsDisabled"
@@ -137,7 +137,7 @@
 <script>
 const CONTAINER_ITEM_HEIGHT = 24;
 const CONTAINER_DESCRIPTION_HEIGHT = 95;
-const CONTAINER_MINIMUM_HEIGHT = 120;
+const CONTAINER_MINIMUM_HEIGHT = 117;
 
 export default {
   props: {
@@ -244,9 +244,11 @@ export default {
         }
       });
       this.checkedRelatedTypes = this.relatedTypes;
-      const height = this.checkedRelatedTypes.length
+      const height = this.relatedTypes.length
         ? this.checkedRelatedTypes.length * CONTAINER_ITEM_HEIGHT + CONTAINER_DESCRIPTION_HEIGHT
         : CONTAINER_MINIMUM_HEIGHT;
+
+      await this.$nextTick();
       this.$refs.container.style.setProperty('--container-height', `${height}px`);
     },
     async runExport() {
@@ -450,25 +452,15 @@ export default {
   width: 100%;
 }
 
-.fade-enter-active {
-  .apos-export__section-container {
-    animation: expand .3;
-  }
+.apos-export__section-container {
+  height: var(--container-height);
+  transition: height 200ms linear;
 }
 
-.fade-leave-active {
+.slide-enter-from, .slide-leave-to {
   .apos-export__section-container {
-    animation: expand .3 reverse;
-  }
-}
-
-@keyframes expand {
-  0% {
     height: 0;
   }
-
-  100% {
-    height: var(--container-height);
-  }
 }
+
 </style>