Animation 动画

为插槽内容提供显示和隐藏的过渡动画。show 控制显示状态，animationType 接收一个动画类型数组。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 淡入淡出内容 -->
<fui-animation :show="isVisible" :animationType="['fade']">
  <text>提示内容</text>
</fui-animation>

属性

属性	类型	说明	本地源码默认值
show	Boolean	是否显示内容	false
animationType	Array	动画类型，可组合 fade、slide-top、slide-right、slide-bottom、slide-left、zoom-in、zoom-out	[]
duration	Number	过渡时长，单位毫秒	300
styles	Object	外层容器的样式，覆盖组件内部对应默认样式	{}

事件

事件	说明	回调参数
click	点击动画容器时触发	{ detail: 当前显示状态 }
change	过渡完成后触发	{ detail: 当前显示状态 }

插槽

插槽	说明
default	放置参与动画的内容

平台说明

nvue 使用原生动画插件，其他平台使用样式过渡。实际过渡效果受目标平台和所选动画类型影响。