theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(transition): 改善 transition 文档

Browse Source
This commit is contained in:
就眠儀式 2022-10-24 00:25:54 +08:00
parent 247466983b
commit 8124719af0
1 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
package/document-component/src/document/zh-CN/components/transition.md
View File

@ -10,7 +10,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画 ::: demo 使用 `lay-transition` 标签，为 `element` 提供过渡动画。
<template> <template>
<lay-button @click="changeVisible">开始</lay-button> <lay-button @click="changeVisible">开始</lay-button>
@ -21,22 +21,13 @@
</lay-transition> </lay-transition>
</template> </template>
<script> <script setup>
import { ref } from 'vue' import { ref } from "vue";
export default { const visible = ref(true);
setup() {
const visible = ref(true); const changeVisible = () => {
const changeVisible = () => {
visible.value = !visible.value; visible.value = !visible.value;
}
return {
changeVisible
}
}
} }
</script> </script>
@ -45,7 +36,7 @@ export default {
::: title 淡入淡出 ::: title 淡入淡出
::: :::
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画 ::: demo 使用 `type` 属性，设置过渡方式。
<template> <template>
<lay-button @click="changeVisible1">开始</lay-button> <lay-button @click="changeVisible1">开始</lay-button>
@ -56,22 +47,13 @@ export default {
</lay-transition> </lay-transition>
</template> </template>
<script> <script setup>
import { ref } from 'vue' import { ref } from "vue";
export default { const visible1 = ref(true);
setup() {
const visible1 = ref(true); const changeVisible1 = () => {
const changeVisible1 = () => {
visible1.value = !visible1.value; visible1.value = !visible1.value;
}
return {
changeVisible1
}
}
} }
</script> </script>