# 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!
# 此页面源代码地址
# 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 超链接