t-transition

Transition 过渡

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <view class="transition-demo">
    <!-- 淡入淡出 -->
    <t-transition mode="fade">
      <view class="box">淡入淡出效果</view>
    </t-transition>
    
    <!-- 从上方滑入 -->
    <t-transition mode="fade-up">
      <view class="box">从上方滑入</view>
    </t-transition>
    
    <!-- 缩放效果 -->
    <t-transition mode="zoom" :duration="1000">
      <view class="box">缩放效果</view>
    </t-transition>
    
    <!-- 心跳效果 -->
    <t-transition mode="heartbeat" :animationIterationCount="3">
      <t-icon name="heart-fill" type="error" size="large"></t-icon>
    </t-transition>
    
    <!-- 手动触发 -->
    <t-transition ref="transitionRef" mode="fade-left" :autoPlay="false">
      <view class="box">点击按钮触发</view>
    </t-transition>
    <t-button @click="playTransition">播放动画</t-button>
  </view>
</template>

<script setup>
const transitionRef = ref(null);

function playTransition() {
  transitionRef.value?.play();
}
</script>

<style scoped>
.transition-demo {
  padding: 40rpx;
}
.box {
  width: 200rpx;
  height: 100rpx;
  background: #2979ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
}
</style>

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	心跳缩放效果

Events

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

方法

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