feat: 新增 transition 组件

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

@@ -0,0 +1,46 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+::: describe 过渡效果的使用将大幅提升用户的使用体验。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
+
+<template>
+  <lay-button @click="changeVisible">开始</lay-button>
+  <br/>
+  <br/>
+  <lay-transition>
+    <div v-show="visible">
+        <ul style="width:300px;background: #79C48C;border-radius: 4px;height:200px;">
+        </ul>
+    </div>
+  </lay-transition>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible = ref(true);
+
+    const changeVisible = () => {
+        visible.value = !visible.value;
+    }
+
+    return {
+        changeVisible
+    }
+  }
+}
+</script>
+
+:::

example/docs/zh-CN/guide/changelog.md

@@ -18,6 +18,7 @@
         <ul>
           <li>[新增] notice-bar 通告栏。</li>
           <li>[新增] scroll 虚拟滚动组件。</li> 
+          <li>[新增] transition 过渡动画组件。</li>
           <li>[新增] table 表格组件 excel 导出工具栏。</li>
           <li>[新增] table column 选项 sort 属性, 开启字段排序。</li>
           <li>[新增] page 分页组件 v-model 属性, 支持默认页设置。</li>

example/src/router/zh-CN.ts

@@ -370,6 +370,12 @@ const zhCN = [
               import("../../docs/zh-CN/components/noticeBar.md"),
             meta: { title: "通知栏" },
           },
+          {
+            path: "/zh-CN/components/transition",
+            component: () =>
+              import("../../docs/zh-CN/components/transition.md"),
+            meta: { title: "通知栏" },
+          },
         ],
       },
     ],

example/src/view/utils/menus.ts

@@ -26,13 +26,18 @@ const menus = [
         title: "动画",
         subTitle: "animation",
         path: "/zh-CN/components/animation",
+      },{
+        id: 101,
+        title: "过渡",
+        subTitle: "transition",
+        path: "/zh-CN/components/transition",
       },
       {
         id: 101,
         title: "全屏",
         subTitle: "fullscreen",
         path: "/zh-CN/components/fullscreen",
-      },
+      }
     ],
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

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 };