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

::: anchor :::

::: title 基本介绍 :::

::: describe 过渡效果的使用将大幅提升用户的使用体验。 :::

::: title 基础使用 :::

::: demo 使用 lay-transition 标签, 为元素提供过渡动画

开始

内容 <script> import { ref } from 'vue' export default { setup() { const visible = ref(true); const changeVisible = () => { visible.value = !visible.value; } return { changeVisible } } } </script>

:::

::: title 淡入淡出 :::

::: demo 使用 lay-transition 标签, 为元素提供过渡动画

开始

内容 <script> import { ref } from 'vue' export default { setup() { const visible1 = ref(true); const changeVisible1 = () => { visible1.value = !visible1.value; } return { changeVisible1 } } } </script>

:::

::: title Transition 属性 :::

::: table

属性	描述	类型	默认值	可选值
enable	启用	boolean	true	true false
type	类型	string	collapse	--

:::

::: title Transition 属性值 :::

::: table

属性值	描述
collapse	折叠动画
fade	淡入淡出
:::