E_WeChat/miniprogram_npm/tdesign-miniprogram/transition

---

title: Transition 过渡 description: 过渡组件。 spline: message

isComponent: true

引入

引入组件

在 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>

API

<transition> 组件

组件路径：tdesign-miniprogram/transition/transition

过渡类名

过渡类名指定格式同 vue，enter/enter-to leave/leave-to

Props

属性	值类型	默认值	说明
name	String	't-transition'	过渡类名，类似 vue 过渡类名
visible	Boolean	false	是否显示
customClass	String	false	自定义容器类名
destoryOnHide	Boolean	false	隐藏之后是否渲染 slot 内容
appear	Boolean	false	首次出现是否展示动画
durations	Number / Boolean		手动指定过渡时间