From b842a57d9b116f54222852a217e12c2f4ef04892 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 19 Mar 2022 17:57:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20transition=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/transition.md | 46 ++++++++++++
 example/docs/zh-CN/guide/changelog.md       |  1 +
 example/src/router/zh-CN.ts                 |  6 ++
 example/src/view/utils/menus.ts             |  7 +-
 package.json                                |  2 +-
 src/component/dropdown/index.less           |  4 +-
 src/component/dropdown/index.vue            |  2 +-
 src/component/dropdownMenu/index.vue        | 12 +--
 src/component/select/index.vue              |  3 +-
 src/component/transition/index.ts           |  8 ++
 src/component/transition/index.vue          | 81 +++++++++++++++++++++
 src/index.ts                                |  5 +-
 12 files changed, 163 insertions(+), 14 deletions(-)
 create mode 100644 example/docs/zh-CN/components/transition.md
 create mode 100644 src/component/transition/index.ts
 create mode 100644 src/component/transition/index.vue

diff --git a/example/docs/zh-CN/components/transition.md b/example/docs/zh-CN/components/transition.md
new file mode 100644
index 00000000..6ff9adba
--- /dev/null
+++ b/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>
+
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index d88d20c6..a6c2f6df 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/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>
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 5282cd46..595630ac 100644
--- a/example/src/router/zh-CN.ts
+++ b/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: "通知栏" },
+          },
         ],
       },
     ],
diff --git a/example/src/view/utils/menus.ts b/example/src/view/utils/menus.ts
index 42d65a41..e5a667aa 100644
--- a/example/src/view/utils/menus.ts
+++ b/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",
-      },
+      }
     ],
   },
   {
diff --git a/package.json b/package.json
index 81f9f036..33ea0bf8 100644
--- a/package.json
+++ b/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",
diff --git a/src/component/dropdown/index.less b/src/component/dropdown/index.less
index 06c72b00..5a32b931 100644
--- a/src/component/dropdown/index.less
+++ b/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;
 }
 
diff --git a/src/component/dropdown/index.vue b/src/component/dropdown/index.vue
index 34c05862..31fa9a3c 100644
--- a/src/component/dropdown/index.vue
+++ b/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>
diff --git a/src/component/dropdownMenu/index.vue b/src/component/dropdownMenu/index.vue
index ebfcb9ee..67601d81 100644
--- a/src/component/dropdownMenu/index.vue
+++ b/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>
\ No newline at end of file
+  name: "LayDropdownMenu",
+};
+</script>
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index 564061c2..2d80c9ba 100644
--- a/src/component/select/index.vue
+++ b/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>
diff --git a/src/component/transition/index.ts b/src/component/transition/index.ts
new file mode 100644
index 00000000..389b5c17
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/component/transition/index.vue b/src/component/transition/index.vue
new file mode 100644
index 00000000..08121614
--- /dev/null
+++ b/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>
diff --git a/src/index.ts b/src/index.ts
index cef11482..afc77b21 100644
--- a/src/index.ts
+++ b/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 };