# @lxjx/react-transition-spring

> react-spring based animation component

Latest version **1.2.6** (published 2021-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lxjx/react-transition-spring
pnpm add @lxjx/react-transition-spring
yarn add @lxjx/react-transition-spring
bun add @lxjx/react-transition-spring
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2021-01-16 |
| First published | 2019-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lixianjie |

## Links

- npm: https://www.npmjs.com/package/@lxjx/react-transition-spring
- Repository: https://github.com/Iixianjie/react-transition-spring
- npm.io page: https://npm.io/package/@lxjx/react-transition-spring

## Dependencies (3)

- [@lxjx/hooks](https://npm.io/package/@lxjx/hooks.md) ^1.16.3
- [react-spring](https://npm.io/package/react-spring.md) ^9.0.0-rc.3
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.2

## Recent versions

- 1.2.6 (latest) — 2021-01-16
- 1.2.5 — 2020-12-16
- 1.2.4 — 2020-12-11
- 1.2.3 — 2020-12-11
- 1.2.2 — 2020-10-27
- 1.2.1 — 2020-10-17
- 1.1.0 — 2020-08-26
- 1.0.9 — 2019-12-02
- 1.0.8 — 2019-11-20
- 1.0.7 — 2019-11-17
- 1.0.6 — 2019-11-17
- 1.0.5 — 2019-11-17
- 1.0.3 — 2019-11-17
- 1.0.2 — 2019-11-17
- 1.0.0 — 2019-11-11

## README

<h1 align="center" style="color: #61dafb;">react-transition-spring</h1>

<br>
<br>

## Introduction
react-transition-spring 是基于 react-spring 的一套封装组件，用于简化通过react-spring执行开关动画的方式, 同时, 也扩展了一些非常使用的属性如`unmountOnExit`、`mountOnEnter`。

💡 本库应用于明确知道入场值和离场值的过渡动画(亦称为开关动画), 如果动画需要通过复杂的操作完成(手势等拥有不确定的动画结果的动画)请直接使用react-spring

提供基础组件 `TransitionBase` 以及基于 `TransitionBase` 的上层组件 `Transition`, 内置了一些非常常见的开关动画效果。

## Usage

以下示例介绍了如何使用 `Transition` 和 `TransitionBase` 执行 `fade` 动画

```tsx
import { Transition, TransitionBase } from '@lxjx/react-transition-spring';

const [show, setShow] = useState(false);

return (
    <div style={{ padding: 100 }}>
      <button onClick={() => setShow(prev => !prev)}>toggle</button>
      
      <Transition toggle={show} style={redBox} type="fade">
        <div>动画</div>
      </Transition>

      <TransitionBase toggle={show} style={redBox} to={{ opacity: 1 }} from={{ opacity: 0 }} >
        <div>动画</div>
      </TransitionBase>
    </div>
);
```

## API
**共有配置**

```ts
interface Base {
  /** 控制开关动画 */
  toggle?: boolean;
  /** true | 初次加载时是否触发动画 */
  appear?: boolean;
  /** 'div' | 包裹元素的tag类型。(注意当为span等内联元素时transform不会生效，需要将其设置为inner-block) */
  tag?: keyof typeof animated;
  /** 动画开始前的延迟时间 */
  delay?: number;
  /** react-spring 动画配置 */
  config?: SpringBaseProps['config'];
  /** 所有动画结束后调用, 接收动画结束后的动画值 */
  onRest?: (transitionArg: any) => void;
  /** 动画开始, 会在动画运行、初始化期间多次调用，不应该将其作为进行其他操作的依据 */
  onStart?: () => void;
  /** false | 默认情况下动画结束后组件依然会保持挂载，设置此属性会在过渡结束后会卸载组件 */
  unmountOnExit?: boolean;
  /** false | 初次渲染时，组件默认会以from状态先加载，为true时，只有在初次触发动画时才会加载组件 */
  mountOnEnter?: boolean;
  /** 包裹元素的类名 */
  className?: string;
  /** 包裹元素样式 */
  style?: React.CSSProperties;
  /** 执行某些`破坏性`(form和to被设置为和前一个值毫无关联的动画值)的动画时，可以设置此项来取消前一个动画造成的影响 */
  reset?: boolean;
  /** 指向根节点的ref, 用于直接操作根节点 */
  innerRef?: any;

  [key: string]: any;
}
```



**`Transition`**

集成组件，包含一组内置动画，使用更方便

```ts
interface TransitionProps extends Base {
  /** 动画类型 */
  type: TransitionTypes;
  /** true | 为所有类型的动画附加fade过渡，使其视觉效果更平滑 */
  alpha?: boolean;
}

type TransitionTypes =
  | 'fade'
  | 'zoom'
  | 'punch'
  | 'slideLeft'
  | 'slideRight'
  | 'slideTop'
  | 'slideBottom'
  | 'bounce';
```



**`TransitionBase`**

基础组件，自行配置动画值，使用更灵活

```ts
interface TransitionBaseProps extends Base {
  /** 动画的入场状态 */
  to: any;
  /** 动画的离场状态 */
  from: any;
  /** 用于插值动画，在动画属性传递给动画元素前会将即将用于动画的style和当前的toggle状态传入并返回新的动画对象 */
  interpolater?: (props: any, toggle: boolean) => any;
  /** true | 执行完离场动画后对元素进行可见性隐藏, 防止离场元素占用布局空间和触发事件 */
  changeVisible?: boolean;
}
```



## 进阶使用

执行数字动画

```tsx
<TransitionBase
    toggle={toggle}
    className="box"
    tto={{ number: 0 }}
    from={{ number: 100000 }}
    >
    {({ number: number }: any) => number.interpolate((n: any) => n.toFixed(2))}
</TransitionBase>
```

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