uv-ui

# Transition 动画

✈

组件名：uv-transition

点击下载&安装 (opens new window)

该组件用于元素的动画过渡效果，丰富的内置动画，支持自定义动画。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

通过show属性设置动画的打开和关闭

<template>
	<button type="default" @click="open">fade</button>
	<uv-transition 
		:show="show" 
		:custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}" 
		@change="change">
	</uv-transition>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				this.show = !this.show;
			},
			change(e) {
				console.log('动画触发：', e);
			}
		}
	}
</script>

# 动画模式

通过mode属性设置动画的模式，默认fade。 比如设置mode="zoom-in"能达到由小到大过渡 效果，更多模式见下Mode Options

<template>
	<button type="default" @click="open">fade</button>
	<uv-transition 
		:show="show" 
		mode="zoom-in"
		:custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}" 
		@change="change">
	</uv-transition>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				this.show = !this.show;
			},
			change(e) {
				console.log('动画触发：', e);
			}
		}
	}
</script>

# 自定义动画

当内置动画类型不能满足需求的时候，可以使用 step() 和 run() 自定义动画，入参以及具体用法参考下方属性说明

init() 方法可以覆盖默认配置。方法及属性详情参考下方。

<template>
	<view>
		<button type="primary" @click="run">执行动画</button>
		<uv-transition 
            ref="ani" 
            :custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}" 
            :show="show"  />
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
		}
	},
	onReady() {
		this.$refs.ani.init({
			duration: 1000,
			timingFunction: 'linear',
			transformOrigin: '50% 50%',
			delay: 500
		})
	},
	methods: {
		run() {
			// 同时右平移到 100px,旋转 360 读
			this.$refs.ani.step({
				translateX: '100px',
				rotate: '360'
			})
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
			this.$refs.ani.step({
				translateX: '0px',
				rotate: '0'
			},
			{
				timingFunction: 'ease-in',
				duration: 200
			})
			// 开始执行动画
			this.$refs.ani.run(()=>{
				console.log('动画支持完毕')
			})
		}
	}
}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Transition Props

参数 说明 类型 默认值 可选值
show 控制组件显示或关闭 Boolean false true | false
mode 内置过渡动画类型 String fade 见下Mode Options
duration 动画的执行时间，单位ms String | Number 300 -
timingFunction 使用的动画过渡函数，详见 String ease-out -
customClass 自定义类名 String - -
cellChild 是否属于cell节点下。nvue模式下的该组件在cell或uv-list等组件下使用，该值最好是设置成true，避免回收后不显示的BUG。 Boolean false true | false
customStyle 自定义样式 Object - -

# Mode Options

格式为： 'fade' 或者 ['fade','slide-top']

注意： 组合使用时，同一种类型相反的过渡动画如（slide-top、slide-bottom）同时使用时，只有最后一个生效

属性值 说明
fade 渐隐渐出过渡
slide-top 由上至下过渡
slide-bottom 由下至上过渡
slide-left 由左至右过渡
slide-right 由右至左过渡
zoom-in 由小到大过渡
zoom-out 由大到小过渡

# Transition Events

事件名 说明 回调参数
@click 点击组件触发 -
@change 过渡动画结束时触发 e = {detail:true | false}

# Transition Methods

方法名 说明 回调参数
init() 手动初始化配置 Function(OBJECT:config)
step() 动画队列 Function(OBJECT:type,OBJECT:config)
run() 执行动画 Function(FUNCTION:callback)

# init(OBJECT:config) 初始化

  • 通过ref调用该方法
  • 手动设置动画配置，需要在页面渲染完毕后调用
this.$refs.ani.init({
	duration: 1000,
	timingFunction: 'linear',
	transformOrigin: '50% 50%',
	delay: 500
})

# step(OBJECT:type,OBJECT:config) 动画队列

  • 通过ref调用该方法
  • 调用 step() 来表示一组动画完成，step 第一个参数可以传入任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 第二个参数可以传入一个跟 uni.createAnimation() 一样的配置参数用于指定当前组动画的配置。
  • 第一个参数支持的动画参考下面的 支持的动画
  • 第二个参数参考下面的 动画配置，可省略，如果省略继承init()的配置
// 上平移到 100px，同时旋转到 90 度
this.$refs.ani.step({
	translateX: '100px',
	rotate: '90'
},
{
	timingFunction: 'ease-in',
	duration: 200
})

# run(FUNCTION:callback) 执行动画

  • 通过ref调用该方法
  • 在执行 step() 后，需要调用 run() 来运行动画 ，否则动画会一直等待
  • run() 方法可以传入一个 callback 函数 ，会在所有动画执行完毕后回调
// 开始执行动画，结束回调
this.$refs.ani.run(()=>{
	console.log('动画支持完毕')
})

# 动画配置

动画配置 ， init() 与 step() 第二个参数配置相同 ，如果配置step()第二个参数，将会覆盖 init() 的配置

属性名 类型 默认值 说明 平台差异
duration Number 400 动画持续时间，单位ms -
timingFunction String "linear" -
delay Number 0 动画延迟时间，单位ms -
needLayout Boolean false 动画执行是否影响布局 仅 nvue 支持
transformOrigin String "center center" 设置 transform-origin (opens new window) -

# timingFunction属性说明

属性名 说明 平台差异
linear 动画从头到尾的速度是相同的 -
ease 动画以低速开始，然后加快，在结束前变慢 -
ease-in 动画以低速开始 -
ease-in-out 动画以低速开始和结束 -
ease-out 动画以低速结束 -
step-start 动画第一帧就跳至结束状态直到结束 nvue不支持
step-end 动画一直保持开始状态，最后一帧跳到结束状态 nvue不支持

# 支持的动画

  • 调用 step() 来表示一组动画完成
  • 如果同一个动画方法有多个值，多个值使用数组分隔
this.$refs.ani.step({
	width:'100px',
	scale: [1.2,0.8],
})

# 样式：

属性名 类型 说明 平台差异
opacity Number 透明度，参数范围 0~1 -
backgroundColor Number | String 颜色值 -
width Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 -
height Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 -
top Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 nvue 不支持
left Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 nvue 不支持
bottom Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 nvue 不支持
right Number | String 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 nvue 不支持
this.$refs.ani.step({
	opacity: 1,
	backgroundColor: '#3c9cff',
	widht:'100px',
	height:'50rpx',
})

# 旋转：

旋转属性的值不需要填写单位

属性名 值 说明 平台差异
rotate deg deg的范围-180~180，从原点顺时针旋转一个deg角度 -
rotateX deg deg的范围-180~180，在X轴旋转一个deg角度 -
rotateY deg deg的范围-180~180，在Y轴旋转一个deg角度 -
rotateZ deg deg的范围-180~180，在Z轴旋转一个deg角度 nvue不支持
rotate3d x,y,z,deg 同 transform-function rotate3d nvue不支持
this.$refs.ani.step({
	rotateX: 45,
	rotateY: 45
})

# 缩放：

属性名 值 说明 平台差异
scale sx,[sy] 一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数 -
scaleX sx 在X轴缩放sx倍数 -
scaleY sy 在Y轴缩放sy倍数 -
scaleZ sz 在Z轴缩放sy倍数 nvue不支持
scale3d sx,sy,sz 在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数 nvue不支持
this.$refs.ani.step({
	scale: [1.2,0.8]
})

# 偏移：

属性名 值 说明 平台差异
translate tx,[ty] 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。 -
translateX tx 在X轴偏移tx，单位px -
translateY ty 在Y轴偏移tx，单位px -
translateZ tz 在Z轴偏移tx，单位px nvue不支持
translate3d tx,ty,tz 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px nvue不支持
this.$refs.ani.step({
	translateX: '100px'
})

← Form 表单 →