feat: 新增 transition 组件 type 属性, 默认为 collapse

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

@@ -1,7 +1,7 @@
 ::: anchor
 :::
 
-::: title 基础使用
+::: title 基本介绍
 :::
 
 ::: describe 过渡效果的使用将大幅提升用户的使用体验。
@@ -17,14 +17,7 @@
   <br/>
   <br/>
   <lay-transition>
-    <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-card title="标题" v-if="visible">内容</lay-card>
   </lay-transition>
 </template>
 
@@ -47,4 +40,39 @@ export default {
 }
 </script>
 
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
+
+<template>
+  <lay-button @click="changeVisible1">开始</lay-button>
+  <br/>
+  <br/>
+  <lay-transition type="fade">
+      <lay-card title="标题" v-if="visible1">内容</lay-card>
+  </lay-transition>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const visible1 = ref(true);
+
+    const changeVisible1 = () => {
+        visible1.value = !visible1.value;
+    }
+
+    return {
+        changeVisible1
+    }
+  }
+}
+</script>
+
 :::