该组件用于组件的动画过渡效果。

基本使用

通过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	点击组件时触发	-