Transition 过渡动画

过渡动画组件，用于元素的显示/隐藏过渡效果，支持淡入淡出、滑动、缩放等

演示

9:41

代码示例

<!-- 过渡演示 -->
  <re-transition :key="current" :show="showTransition" :name="currentConfig.name" :duration="currentConfig.duration" > <view class="demo-transition-box"> <text class="demo-transition-text">{{ currentConfig.label }}</text> </view> </re-transition>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-transition />。

API

Transition Props

名称类型默认值描述必传
showbooleanfalse @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否显示 @default false @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
namestringfade @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}动画名称 @default fade @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
durationnumber300 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}动画时长(ms) @default 300 @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
customStylestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}自定义样式 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y

Transition Events

名称参数描述
before-enter--
enter--
after-enter--
before-leave--
leave--
after-leave--

Transition Slots

名称描述
default默认插槽
SafeArea 安全区域
安全区域组件，用于处理刘海屏、底部安全区域等适配问题
GiftBox 礼物盒
参考 NutUI bingo demo，还原神秘大礼盒开启动效。