forked from lsl/xzjl-ui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
lsl
7e355978ae
|
3 years ago | |
|---|---|---|
| .. | ||
| README.md | 3 years ago | |
| index.d.ts | 3 years ago | |
| index.js | 3 years ago | |
| props.d.ts | 3 years ago | |
| props.js | 3 years ago | |
| transition.d.ts | 3 years ago | |
| transition.js | 3 years ago | |
| transition.json | 3 years ago | |
| transition.wxml | 3 years ago | |
| transition.wxss | 3 years ago | |
| type.d.ts | 3 years ago | |
| type.js | 3 years ago | |
README.md
| title | description | spline | isComponent |
|---|---|---|---|
| Transition 过渡 | 过渡组件。 | message | 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 | 手动指定过渡时间 |