feat: 新增 transition 组件

src/component/dropdown/index.less

@@ -14,11 +14,11 @@
   min-width: 100%;
   background-color: #fff;
   box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
 }
 
 .layui-dropdown dl > .layui-dropdown-menu {
-  border: 1px solid #e4e7ed;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
   border-radius: @global-border-radius;
 }
 

src/component/dropdown/index.vue

@@ -48,7 +48,7 @@ defineExpose({ open, hide, toggle });
     class="layui-dropdown"
     @mouseenter="trigger === 'hover' && open()"
     @mouseleave="trigger === 'hover' && hide()"
-    :class="{'layui-dropdown-up' : openState}"
+    :class="{ 'layui-dropdown-up': openState }"
   >
     <div @click="trigger === 'click' && toggle()">
       <slot></slot>

src/component/dropdownMenu/index.vue

@@ -1,11 +1,11 @@
 <template>
-    <ul class="layui-menu layui-dropdown-menu">
-        <slot></slot>
-    </ul>
+  <ul class="layui-menu layui-dropdown-menu">
+    <slot></slot>
+  </ul>
 </template>
 
 <script lang="ts">
 export default {
-    name: "LayDropdownMenu"
-}
-</script>
+  name: "LayDropdownMenu",
+};
+</script>

src/component/select/index.vue

@@ -211,7 +211,7 @@ provide("selectItem", selectItem);
         </div>
       </div>
     </div>
-    
+
     <!-- 下拉内容 -->
     <dl class="layui-anim layui-anim-upbit">
       <template v-if="!multiple && showEmpty">
@@ -219,6 +219,5 @@ provide("selectItem", selectItem);
       </template>
       <slot></slot>
     </dl>
-
   </div>
 </template>

src/component/transition/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/transition/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:enter-cancelled="enterCancelled"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+    v-on:leave-cancelled="leaveCancelled"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayTransition",
+};
+</script>
+
+<script setup lang="ts">
+const elTransition =
+  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
+
+const beforeEnter = (el: any) => {
+  el.style.transition = elTransition;
+  if (!el.dataset) el.dataset = {};
+  el.dataset.oldPaddingTop = el.style.paddingTop;
+  el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  el.style.height = 0;
+  el.style.paddingTop = 0;
+  el.style.paddingBottom = 0;
+};
+
+const enter = (el: any) => {
+  el.dataset.oldOverflow = el.style.overflow;
+  if (el.scrollHeight !== 0) {
+    el.style.height = el.scrollHeight + "px";
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  } else {
+    el.style.height = "";
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+  }
+  el.style.overflow = "hidden";
+};
+
+const afterEnter = (el: any) => {
+  el.style.transition = "";
+  el.style.height = "";
+  el.style.overflow = el.dataset.oldOverflow;
+};
+
+const beforeLeave = (el: any) => {
+  if (!el.dataset) el.dataset = {};
+  el.dataset.oldPaddingTop = el.style.paddingTop;
+  el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  el.dataset.oldOverflow = el.style.overflow;
+  el.style.height = el.scrollHeight + "px";
+  el.style.overflow = "hidden";
+};
+
+const leave = (el: any) => {
+  if (el.scrollHeight !== 0) {
+    el.style.transition = elTransition;
+    el.style.height = 0;
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  }
+};
+
+const afterLeave = (el: any) => {
+  el.style.transition = "";
+  el.style.height = "";
+  el.style.overflow = el.dataset.oldOverflow;
+  el.style.paddingTop = el.dataset.oldPaddingTop;
+  el.style.paddingBottom = el.dataset.oldPaddingBottom;
+};
+</script>

src/index.ts

@@ -80,6 +80,7 @@ import LayResult from "./component/result/index";
 import LayFullscreen from "./component/fullscreen/index";
 import LayDatePicker from "./component/datePicker/index";
 import LayNoticeBar from "./component/noticeBar/index";
+import LayTransition from "./component/transition/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -158,6 +159,7 @@ const components: Record<string, Component> = {
   LayConfigProvider,
   LayDatePicker,
   LayNoticeBar,
+  LayTransition
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -216,7 +218,7 @@ export {
   LayFormItem,
   LayRate,
   LayDropdown,
-  LayDropdownMenu, 
+  LayDropdownMenu,
   LayDropdownMenuItem,
   LayTab,
   LayTabItem,
@@ -244,6 +246,7 @@ export {
   LayConfigProvider,
   LayDatePicker,
   LayNoticeBar,
+  LayTransition
 };
 
 export { layer };