Animation 动画，过渡效果。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 duration 属性设置动画过渡时间，animationType 属性设置过渡动画类型，styles 属性设置组件外层相关样式，show 属性控制组件显示隐藏。

<wui-button type="gray" width="400rpx" height="84rpx" text="Fade" bold @click="handleAni(['fade'], true)"></wui-button>

<wui-animation :duration="500" :animationType="mode" :styles="styles" :show="show" @click="handleClick"
	@change="change">
	<view class="wui-ani__box wui-flex__center">transition</view>
</wui-animation>

  const show = ref(false);
  const mode = ref(['fade']);
  const styles = ref({
    backgroundColor: '',
  });
  const handleAni = (modeItem: any, mask) => {
    if (mask) {
      styles.value.backgroundColor = 'rgba(0,0,0,0.6)';
    } else {
      styles.value.backgroundColor = 'rgba(0,0,0,0.0)';
    }
    mode.value = modeItem;
    show.value = !show.value;
  };
  const handleClick = () => {
    show.value = false;
  };
  const change = (e) => {
    console.log(e);
  };

Slots

插槽名称	说明
default	过渡动画显示的自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示	false	-
animationType	Array	过渡动画类型，可取值：fade、slide-top、slide-right、slide-bottom、slide-left、zoom-in、zoom-out	[ ]	-
duration	Number	动画过渡的时间，单位ms	300	-
styles	Object	组件外层样式	如下styles	-

styles 默认值如下，属性styles传值：同名属性覆盖，不同名属性合并

//组件外层样式 默认值
styles:{
	position: 'fixed',
	bottom: 0,
	top: 0,
	left: 0,
	right: 0,
	// #ifndef APP-NVUE
	display: 'flex',
	// #endif
	'justify-content': 'center',
	'align-items': 'center'
}

Events

事件名	说明	回调参数
@click	点击动画弹层时触发	{ detail:是否显示 }
@change	动画执行时触发	{ detail:是否显示 }