外观
Transition 动画
约 330 字大约 1 分钟
2025-10-31
该组件用于组件的动画过渡效果。
基本使用
通过slot传入内容,默认使用的是fade效果
<template>
<un-transition :show="show">
<view class="transition"></view>
</un-transition>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>动画模式
通过mode传入效果模式,目前支持:
fade淡入fade-up上滑淡入fade-down下滑淡入fade-left左滑淡入fade-right右滑淡入slide-up上滑进入slide-down下滑进入slide-left左滑进入slide-right右滑进入zoom-in缩放zoom-out缩放
<template>
<un-transition :show="show" mode="zoom-in">
<view class="transition"></view>
</un-transition>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否展示组件 | boolean | false |
| mode | 使用的动画模式 | Enum | fade |
| duration | 动画的执行时间,单位ms | string | number | 300 |
| timingFunction | 使用的动画过渡函数 | string | ease-out |
| zIndex | 层级 | string | number | 0 |
| customClass | 自定义类名 | string | - |
| customStyle | 自定义样式 | string | object | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| beforeEnter | 进入前触发 | - |
| enter | 进入中触发 | - |
| afterEnter | 进入后触发 | - |
| beforeLeave | 离开前触发 | - |
| leave | 离开中触发 | - |
| afterLeave | 离开后触发 | - |
| click | 点击组件时触发 | - |
