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

50 lines
822 B
Markdown
Raw Normal View History

2022-03-19 17:57:32 +08:00
::: anchor
:::
::: title 基础使用
:::
::: describe 过渡效果的使用将大幅提升用户的使用体验。
:::
::: title 基础使用
:::
::: demo 使用 `lay-transition` 标签, 为元素提供过渡动画
<template>
<lay-button @click="changeVisible">开始</lay-button>
<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>
2022-03-19 17:57:32 +08:00
</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>
:::