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

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

@ -10,33 +10,24 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画 ::: demo 使用 `lay-transition` 标签，为 `element` 提供过渡动画。
<template> <template>
<lay-button @click="changeVisible">开始</lay-button> <lay-button @click="changeVisible">开始</lay-button>
<br/> <br/>
<br/> <br/>
<lay-transition> <lay-transition>
<lay-card title="标题" v-if="visible">内容</lay-card> <lay-card title="标题" v-if="visible">内容</lay-card>
</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 = () => {
visible.value = !visible.value;
const changeVisible = () => {
visible.value = !visible.value;
}
return {
changeVisible
}
}
} }
</script> </script>
@ -45,33 +36,24 @@ export default {
::: title 淡入淡出 ::: title 淡入淡出
::: :::
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画 ::: demo 使用 `type` 属性，设置过渡方式。
<template> <template>
<lay-button @click="changeVisible1">开始</lay-button> <lay-button @click="changeVisible1">开始</lay-button>
<br/> <br/>
<br/> <br/>
<lay-transition type="fade"> <lay-transition type="fade">
<lay-card title="标题" v-if="visible1">内容</lay-card> <lay-card title="标题" v-if="visible1">内容</lay-card>
</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 = () => {
visible1.value = !visible1.value;
const changeVisible1 = () => {
visible1.value = !visible1.value;
}
return {
changeVisible1
}
}
} }
</script> </script>