high-mini/components/uni-transition

Transition 过渡动画

代码块： uTransition

元素的简单过渡动画，组件名：uni-transition

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

在 template 中使用组件

<template>
	<view>
		<button type="primary">fade</button>
		<uni-transition :mode-class="['fade']" :styles="{'width':'100px','height':'100px';'backgroundColor':'red'}" :show="show" @change="change" />
	</view>
</template>

import uniTransition from '@/components/uni-transition/uni-transition.vue'
export default {
		components: {
			uniTransition
		},
		data() {
			return {
				show: false,
			}
		},
		onLoad() {},
		methods: {
			open(mode) {
				this.show = !this.show
			},
			change() {
				console.log('触发动画')
			}
		}
	}

API

Transition Props

属性名	类型	默认值	说明
show	Boolean	false	控制组件显示或隐藏，
modeClass	Array	-	过渡动画类型
duration	Number	300	过渡动画持续时间
styles	Object	-	组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：backgroundColor:red

modeClass 类型说明

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

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

注意

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

Transition Events

事件称名	说明	返回值
click	点击组件触发	-
change	过渡动画结束时触发	e = {detail:true}