Transition 动画

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

基本使用

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

<m-transition :show="show">
    <view class="mask" />
</m-transition>

动画模式

• 通过mode传入效果模式，目前支持：
  • fade 淡入
  • fade-up 上滑淡入
  • fade-down 下滑淡入
  • fade-left 左滑淡入
  • fade-right 右滑淡入
  • slide-up 上滑进入
  • slide-down 下滑进入
  • slide-left 左滑进入
  • slide-right 右滑进入
  • zoom 缩放
  • fade-zoom 缩放淡入

<m-transition :show="show" mode="fade-up">
    <view class="mask" />
</m-transition>

API

Props

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

Slot

名称	说明
default	动画内容

Event

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