uView Pro

主题

微信扫描二维码，关注我
0
赞助位
HarmonyOS APP
成为赞助商

Transition 过渡动画 v0.5.2+ ​

23:34

统一的过渡与进出场动效封装，支持多种预设动画和自定义时长。基于CSS动画实现，性能优异。

说明

  • 组件内部使用CSS动画实现，性能优异
  • 支持H5、APP 和所有主流小程序平台
  • 可以通过自定义样式覆盖默认动画效果
  • 动画事件回调函数会接收到当前动画的DOM元素作为参数

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

基本使用 ​

通过show属性控制内容的显示和隐藏，默认使用fade动画效果

html
<u-transition :show="visible">
    <view>这是需要动画的内容</view>
</u-transition>

设置动画类型 ​

通过name属性设置不同的动画效果，支持fade、slide-up、slide-down、slide-left、slide-right、zoom-in、zoom-out

html
<u-transition :show="visible" name="slide-up">
    <view>从下方滑入</view>
</u-transition>

<u-transition :show="visible" name="slide-down">
    <view>从上方滑入</view>
</u-transition>

<u-transition :show="visible" name="slide-left">
    <view>从左侧滑入</view>
</u-transition>

<u-transition :show="visible" name="slide-right">
    <view>从右侧滑入</view>
</u-transition>

<u-transition :show="visible" name="zoom-in">
    <view>放大进入</view>
</u-transition>

<u-transition :show="visible" name="zoom-out">
    <view>缩小进入</view>
</u-transition>

自定义动画时长 ​

通过duration属性设置动画时长，单位为毫秒。支持设置不同的进入和离开时长

html
<!-- 统一设置进入和离开时长 -->
<u-transition :show="visible" :duration="500">
    <view>动画时长500ms</view>
</u-transition>

<!-- 分别设置进入和离开时长 -->
<u-transition :show="visible" :duration="{ enter: 300, leave: 500 }">
    <view>进入300ms，离开500ms</view>
</u-transition>

设置动画曲线 ​

通过timing-function属性设置动画曲线，支持CSS动画曲线值

html
<u-transition :show="visible" timing-function="ease-in-out">
    <view>使用ease-in-out曲线</view>
</u-transition>

<u-transition :show="visible" timing-function="linear">
    <view>使用linear曲线</view>
</u-transition>

设置动画延迟 ​

通过delay属性设置动画延迟开始的时间，单位为毫秒

html
<u-transition :show="visible" :delay="200">
    <view>延迟200ms后开始动画</view>
</u-transition>

首次渲染时执行动画 ​

通过appear属性控制组件首次渲染时是否执行进入动画

html
<u-transition :show="visible" :appear="true">
    <view>首次渲染时会执行进入动画</view>
</u-transition>

设置过渡模式 ​

通过mode属性控制动画的执行顺序，类似于Vue原生的transition组件

  • out-in: 离开动画完成后开始进入动画
  • in-out: 进入动画完成后开始离开动画
html
<u-transition :show="visible" mode="out-in">
    <view>离开动画完成后才开始进入动画</view>
</u-transition>

监听动画事件 ​

组件提供了完整的动画生命周期事件，可以监听各种动画状态

html
<u-transition
    :show="visible"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
    @after-leave="onAfterLeave"
>
    <view>监听动画事件</view>
</u-transition>

API ​

Props ​

参数说明类型默认值可选值
show是否展示内容Booleantruefalse
name预设动画名Stringfadefade / slide-up / slide-down / slide-left / slide-right / zoom-in / zoom-out
mode进入/离开过渡模式，等同于原生 transition 的 modeString''out-in / in-out / ''
duration进入/离开动画时长，单位ms，支持Number | Object300-
timing-function动画曲线Stringcubic-bezier(0.2,0.8,0.2,1)-
delay动画延迟，单位msNumber0-
appear首次渲染时是否执行动画Booleanfalsetrue
custom-class自定义 classString--
custom-style自定义样式String | Object--

Events ​

事件名说明回调参数版本
before-enter进入动画开始前触发element-
enter进入动画开始时触发element-
after-enter进入动画结束后触发element-
enter-cancelled进入动画被取消时触发element-
before-leave离开动画开始前触发element-
leave离开动画开始时触发element-
after-leave离开动画结束后触发element-
leave-cancelled离开动画被取消时触发element-

Slot ​

名称说明
default需要执行过渡动画的内容