# Animation 动画

概述

Animation 动画,过渡效果。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置,但是 weex (Nvue)不支持 z-index 设置层级关系,默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiAnimation from "@/components/firstui/fui-animation/fui-animation.vue"
export default {
	components:{
		fuiAnimation
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

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

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

<fui-animation :duration="500" :animationType="mode" :styles="styles" :show="show" @click="handleClick"
	@change="change">
	<view class="fui-ani__box fui-flex__center">transition</view>
</fui-animation>
1
2
3
4
5
6
//data数据以及方法
data() {
	return {
		show: false,
		mode: ['fade'],
		styles: {}
	}
},
methods: {
	ani(mode, mask) {
		if (mask) {
			this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0.6)');
		} else {
			this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0)');
		}
		setTimeout(() => {
			this.mode = mode;
			this.show = !this.show;
		}, 80);
	},
	handleClick() {
		this.show = false;
	},
	change(e) {
		console.log(e);
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 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'
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# Events

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

示例预览

# 示例代码地址

FirstUIAnimation 动画
Last Updated: 9/29/2022, 1:07:59 AM