# @rax-ui/transition

> Rax UI Transition

Latest version **1.0.0-beta.62** (published 2020-11-24) · 0 weekly downloads

## Install

```sh
npm install @rax-ui/transition
pnpm add @rax-ui/transition
yarn add @rax-ui/transition
bun add @rax-ui/transition
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.62 |
| Published | 2020-11-24 |
| First published | 2019-09-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jinli.lyy@alibaba-inc.com |
| Maintainers | lianmin, amdgigabyte, myronliu347 |
| Keywords | Rax, rax-component |

## Links

- npm: https://www.npmjs.com/package/@rax-ui/transition
- npm.io page: https://npm.io/package/@rax-ui/transition

## Dependencies (8)

- [rax-text](https://npm.io/package/rax-text.md) ^1.2.0
- [rax-view](https://npm.io/package/rax-view.md) ^1.1.0
- [rax-children](https://npm.io/package/rax-children.md) ^1.0.0
- [universal-env](https://npm.io/package/universal-env.md) ^3.1.0
- [@rax-ui/styles](https://npm.io/package/@rax-ui/styles.md) ^1.0.0-beta.62
- [rax-clone-element](https://npm.io/package/rax-clone-element.md) ^1.0.0
- [rax-find-dom-node](https://npm.io/package/rax-find-dom-node.md) ^1.0.1
- [universal-transition](https://npm.io/package/universal-transition.md) ^1.0.0

## Recent versions

- 1.0.0-beta.62 (latest) — 2020-11-24
- 1.0.0-beta.47 (next) — 2020-04-17
- 1.0.0-beta.60 — 2020-08-28
- 1.0.0-beta.59 — 2020-08-18
- 1.0.0-beta.57 — 2020-06-22
- 1.0.0-beta.56 — 2020-06-03
- 1.0.0-beta.55 — 2020-05-26
- 1.0.0-beta.54 — 2020-05-13
- 1.0.0-beta.53 — 2020-05-12
- 1.0.0-beta.52 — 2020-05-11
- 1.0.0-beta.51 — 2020-04-29
- 1.0.0-beta.50 — 2020-04-27
- 1.0.0-beta.49 — 2020-04-23
- 1.0.0-beta.48 — 2020-04-23
- 1.0.0-beta.46 — 2020-04-15
- … 28 more at https://npm.io/package/@rax-ui/transition/versions

## README

---
display: Transition
family: utils
---

# Transition

过渡动画组件, 兼容三端，小程序端要在 `Transition` 与 `Transition.View` 组件上加上统一的 `transitionKey`。


## API

### Transition

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| in | 显示组件；触发进入或退出状态 | boolean | false |
| appear | 第一次挂载就执行动画 | boolean | false |
| mountOnEnter | 第一次进入后挂载组件，默认与 Transition 一起挂载 | boolean | false |
| unmountOnExit | 退出后卸载此组件 | boolean | false |
| transition | 必选, 设置过渡效果属性 `TransitionType` | { enter: TransitionType, exit: TransitionType } | |
| styles | 必选, 设置进入和退出状态的样式 | { enter, exit } | |
| onEnter | 开始进入时回调函数 | () => void |  |
| onExit | 开始退出时回调函数 | () => void |  |
| onEntering | 正在进入时回调函数 | () => void |  |
| onExiting | 正在退出时回调函数 | () => void |  |
| onEntered | 进入后回调函数 | () => void |  |
| onExited | 退出后回调函数 | () => void |  |
| children | 关联子组件 | RaxNode | |


### Transition.View

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| properties | 过渡属性 | Array<keyof CSSProperties> | [] |
| delay | 延迟时间 | number | 0 |
| duration | 动画持续时间 | number | |
| timingFunction | 动画函数 |  'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |
| onTransitionEnd | 动画结束后回调函数 | () => void | |
| transitionKey | 与 Transition 组件配置使用时，在小程序端必选，与 `Transition` 组件的该属性值一致 | string | |

### TransitionType

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| properties | 过渡属性 | Array<keyof CSSProperties> | [] |
| delay | 延迟时间 | number | 0 |
| duration | 动画持续时间 | number | |
| timingFunction | 动画函数 |  'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |

---
_Source: https://npm.io/package/@rax-ui/transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._