fix: transition collapse 动画根元素无法设置内边距

example/docs/zh-CN/components/transition.md

@@ -17,9 +17,13 @@
   <br/>
   <br/>
   <lay-transition>
-    <div v-show="visible">
-        <ul style="width:300px;background: #79C48C;border-radius: 4px;height:200px;">
-        </ul>
+    <div v-show="visible" style="width:300px;background: #79C48C;border-radius: 4px;padding:20px;">
+        <li>1</li>
+        <li>1</li>
+        <li>1</li>
+        <li>1</li>
+        <li>1</li>
+        <li>1</li>
     </div>
   </lay-transition>
 </template>

src/component/collapseItem/index.less

@@ -23,7 +23,6 @@
 }
 
 .layui-colla-content {
-  display: none;
   padding: 10px 15px;
   line-height: 1.6;
   color: #666;

src/component/collapseItem/index.vue

@@ -39,11 +39,7 @@ const showHandle = function () {
     // 普通折叠面板 --> 展开
     activeValues.value.push(props.id);
   }
-
-  emit(
-    "update:modelValue",
-    accordion ? activeValues.value[0] || null : activeValues.value
-  );
+  emit("update:modelValue",accordion ? activeValues.value[0] || null : activeValues.value);
   emit("change", props.id, !_isShow, activeValues.value);
 };
 </script>
@@ -57,10 +53,12 @@ const showHandle = function () {
       <slot name="title" :props="props">{{ title }}</slot>
       <i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
     </h2>
-    <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
-      <p>
-        <slot :props="props"></slot>
-      </p>
-    </div>
+    <lay-transition>
+      <div class="layui-colla-content" v-if="isShow">
+        <p>
+          <slot :props="props"></slot>
+        </p>
+      </div>
+    </lay-transition>
   </div>
 </template>

src/component/transition/index.vue

@@ -58,7 +58,8 @@ const beforeLeave = (el: any) => {
   el.dataset.oldPaddingTop = el.style.paddingTop;
   el.dataset.oldPaddingBottom = el.style.paddingBottom;
   el.dataset.oldOverflow = el.style.overflow;
-  el.style.height = el.scrollHeight + "px";
+  var computedStyle = getComputedStyle(el, null);
+  el.style.height = el.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) + "px";
   el.style.overflow = "hidden";
 };