(transition): 改善 transition 文档

This commit is contained in:
就眠儀式 2022-10-24 00:25:54 +08:00
parent 247466983b
commit 8124719af0

View File

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