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

|modeClass |Array |- |过渡动画类型 |
|duration |Number |300 |过渡动画持续时间 |
|styles |Object |- |组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：backgroundColor:red |

modeClass 类型说明

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

注意

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

Transition Events

|click |点击组件触发 |- |
|change |过渡动画结束时触发 | e = {detail:true} |