---
title: Transition 过渡
description: 过渡组件。
spline: message
在 app.json 或 page.json 中引入组件:
"usingComponents": {
  "t-transition": "tdesign-miniprogram/transition/transition"
}
<!-- page.wxml -->
<t-transition
  name="transition-class"
  visible="{{ visible }}"
>
  <view class="block" style="width: 100px; height: 100px; background: red;"></view>
</t-transition>
<transition> 组件组件路径:tdesign-miniprogram/transition/transition
过渡类名指定格式同 vue,enter/enter-to leave/leave-to
| 属性 | 值类型 | 默认值 | 说明 | 
|---|---|---|---|
| name | String | 't-transition' | 过渡类名,类似 vue 过渡类名 | 
| visible | Boolean | false | 是否显示 | 
| customClass | String | false | 自定义容器类名 | 
| destoryOnHide | Boolean | false | 隐藏之后是否渲染 slot 内容 | 
| appear | Boolean | false | 首次出现是否展示动画 | 
| durations | Number / Boolean | 手动指定过渡时间 |