Transition 动画 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架

# Transition 动画

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

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

通过slot传入内容，默认使用的是fade效果

<template>
    <u-transition :show="show">
        <view class="transition"></view>
    </u-transition>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>
✅ Copy success!

# 动画模式

通过mode传入效果模式，目前支持：

fade 淡入
fade-up 上滑淡入
fade-down 下滑淡入
fade-left 左滑淡入
fade-right 右滑淡入
slide-up 上滑进入
slide-down 下滑进入
slide-left 左滑进入
slide-right 右滑进入
zoom-in 缩放
zoom-out 缩放

<template>
    <u-transition :show="show" mode="zoom-in">
        <view class="transition"></view>
    </u-transition>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>
✅ Copy success!

# 此页面源代码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
show	是否展示组件	Boolean	false	true
mode	使用的动画模式	String	fade	true
duration	动画的执行时间，单位ms	String \| Number	300	-
timingFunction	使用的动画过渡函数，见上方说明	String	ease-out	-
customStyle	自定义样式	Object	-	-

# Events

事件名	说明	回调参数
beforeEnter	进入前触发	-
enter	进入中触发	-
afterEnter	进入后触发	-
beforeLeave	离开前触发	-
leave	离开中触发	-
afterLeave	离开后触发	-

← Link 超链接