# t-transition

Transition 过渡

t-transition 组件介绍

t-transition 是用于实现元素过渡动画的组件，集合了常用的动画特效，如淡入淡出、滑动、缩放、心跳等，使页面之间的切换更加流畅和自然，增强用户体验。

t-transition 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-transition 基础用法

基础用法参考 demo/transition/transition.uvue。

<template>
	<view>
		<t-card class="m-15"
				title="Transtion 过渡动画"
				sub-title="集合常用动画特效，使页面之间的切换更加流畅和自然。它可以实现多种动画效果，例如淡入淡出、滑动、缩放等。增强用户体验，使页面之间的切换更加有趣和吸引力。"></t-card>
		<t-transition :mode="mode"
					  class="fc mt-15 z-999"
					  :animationIterationCount="1"
					  :auto-play="false"
					  ref="transitionins">
			<t-row class="twh-75 r-10 bg-#4cd964"></t-row>
		</t-transition>
		<t-col class='fc p-15'>
			<t-transition mode="heartbeat"
						  :animationIterationCount="0">
				<t-icon name="heart-fill"
						class="c-red s-90!"></t-icon>
			</t-transition>
		</t-col>
		<t-col class="p-15">
			<t-button class="mb-10"
					  @click="onButtonClick('fade')"
					  type="primary">渐隐渐显</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('fade-up')"
					  type="primary">上方进出</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('fade-down')"
					  type="primary">下方进出</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('fade-left')"
					  type="primary">左方进出</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('fade-right')"
					  type="primary">右方进出</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('zoom')"
					  type="primary">缩放</t-button>
			<t-button class="mb-10"
					  @click="onButtonClick('heartbeat')"
					  type="primary">心跳</t-button>
		</t-col>
	</view>
</template>

<script setup>
	const mode = ref<string>('fade')
	const transitionins = ref<ComponentPublicInstance | null>(null)
	function onButtonClick(type : string) {
		mode.value = type;
		transitionins.value?.$callMethod('play')
	}
</script>

t-transition Props

属性名	说明	类型	默认值
mode	动画模式，可选 fade、fade-up、fade-down、fade-left、fade-right、zoom、heartbeat	string	''
autoPlay	是否自动播放动画	boolean	true
animationIterationCount	动画播放次数，0 表示无限循环	number	1
duration	动画播放时间（毫秒）	number	500
timingFunction	动画缓动函数	string	'ease-in-out'
transformOrigin	动画变换原点	string	'50% 50%'
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

动画模式说明

模式	说明
fade	渐隐渐显
fade-up	从上方滑入
fade-down	从下方滑入
fade-left	从左方滑入
fade-right	从右方滑入
zoom	缩放旋转效果
heartbeat	心跳缩放效果

t-transition Events

事件名	说明	回调参数
initFinished	组件初始化完成触发	组件节点信息
transitionend	动画结束时触发	event
click	点击时触发	event

方法

方法名	说明
play()	手动触发动画播放