54 lines
1.4 KiB
Markdown
54 lines
1.4 KiB
Markdown
|
---
|
|||
|
|
title: Transition 过渡
|
|||
|
|
description: 过渡组件。
|
|||
|
|
spline: message
|
|||
|
|
isComponent: true
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 引入
|
|||
|
|
|
|||
|
|
### 引入组件
|
|||
|
|
|
|||
|
|
在 `app.json` 或 `page.json` 中引入组件：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
"usingComponents": {
|
|||
|
|
"t-transition": "tdesign-miniprogram/transition/transition"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 用法
|
|||
|
|
|
|||
|
|
### 组件方式
|
|||
|
|
|
|||
|
|
```xml
|
|||
|
|
<!-- 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 | | 手动指定过渡时间 |
|