@policystudio/policy-studio-ui-vue 1.1.90-beta.80 → 1.1.90-beta.81

package/dist/css/psui_styles_output.css

@@ -1313,17 +1313,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
-.psui-el-accordion .accordion-fade-enter-active,
-.psui-el-accordion .accordion-fade-leave-active {
-  will-change: height, margin-bottom;
-  transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
-  overflow: hidden;
-}
-.psui-el-accordion .accordion-fade-enter-from,
-.psui-el-accordion .accordion-fade-leave-to {
-  height: 0 !important;
-  margin-bottom: 0 !important;
-}
 
 .psui-el-input {
   /* Layout Default */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.80",
+  "version": "1.1.90-beta.81",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsAccordion.scss

@@ -94,17 +94,5 @@
       @apply psui-list-none psui-text-gray-60 psui-mb-5;
     }
 
-    .accordion-fade-enter-active,
-    .accordion-fade-leave-active {
-      will-change: height, margin-bottom;
-      transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
-      overflow: hidden;
-    }
-
-    .accordion-fade-enter-from,
-    .accordion-fade-leave-to {
-      height: 0 !important;
-      margin-bottom: 0 !important;
-    }
   }
 }

package/src/components/accordion/PsAccordionItem.vue

@@ -30,10 +30,12 @@
     </div>
     <transition
       name="accordion-fade"
-      @enter="start"
-      @after-enter="end"
-      @before-leave="start"
-      @after-leave="end"
+      :css="false"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
     >
       <div
         v-if="isOpen"
@@ -128,13 +130,67 @@ const toggle = () => {
     localOpened.value = !localOpened.value
   }
 }
-const start = (el) => {
+
+const beforeEnter = (el) => {
+  el.style.height = '0'
+  el.style.opacity = '0'
+  el.style.overflow = 'hidden'
+  el.style.paddingTop = '0'
+  el.style.paddingBottom = '0'
+  el.style.marginTop = '0'
+  el.style.marginBottom = '0'
+}
+
+const enter = (el, done) => {
+  void el.offsetHeight 
+
+  el.style.transition = 'all 0.3s ease-in-out'
   el.style.height = el.scrollHeight + 'px'
-  el.style.padding = el.srcollPaddingBottom + 'px'
+  el.style.opacity = '1'
+
+  el.style.removeProperty('padding-top')
+  el.style.removeProperty('padding-bottom')
+  el.style.removeProperty('margin-top')
+  el.style.removeProperty('margin-bottom')
+
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+const afterEnter = (el) => {
+  el.style.height = 'auto'
+  el.style.overflow = 'visible'
+  el.style.transition = '' 
 }
-const end = (el) => {
-  el.style.height = ''
-  el.style.padding = ''
+
+const beforeLeave = (el) => {
+  if (!el) return
+
+  el.style.height = el.scrollHeight + 'px'
+  el.style.overflow = 'hidden'
+
+  const style = window.getComputedStyle(el)
+  el.style.paddingTop = style.paddingTop
+  el.style.paddingBottom = style.paddingBottom
+  el.style.marginTop = style.marginTop
+  el.style.marginBottom = style.marginBottom
+}
+
+const leave = (el, done) => {
+  if (!el) return
+
+  void el.offsetHeight 
+  el.style.transition = 'all 0.3s ease-in-out'
+
+  requestAnimationFrame(() => {
+    el.style.height = '0'
+    el.style.opacity = '0'
+    el.style.paddingTop = '0'
+    el.style.paddingBottom = '0'
+    el.style.marginTop = '0'
+    el.style.marginBottom = '0'
+  })
+
+  el.addEventListener('transitionend', done, { once: true })
 }
 </script>