city-casereport/miniprogram_npm/tdesign-miniprogram/transition/README.md

54 lines
1.4 KiB
Markdown
Raw Permalink Normal View History

2023-12-06 14:22:42 +08:00
---
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`
### 过渡类名
过渡类名指定格式同 vueenter/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 | | 手动指定过渡时间 |