# @unis/transition

> Unis transition component

Latest version **0.1.0** (published 2023-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unis/transition
pnpm add @unis/transition
yarn add @unis/transition
bun add @unis/transition
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-04-11 |
| First published | 2022-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 61.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | anuoua |
| Maintainers | anuoua |
| Keywords | transition, animation, unis |

## Links

- npm: https://www.npmjs.com/package/@unis/transition
- Homepage: https://github.com/anuoua/unis/tree/main/packages/unis-transition
- Issues: https://github.com/anuoua/unis/issues
- npm.io page: https://npm.io/package/@unis/transition

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-04-11
- 0.1.0-alpha.3 — 2023-04-07
- 0.1.0-alpha.2 — 2023-04-07
- 0.1.0-alpha.1 — 2023-04-06
- 0.1.0-alpha.0 — 2023-04-04
- 0.0.7 — 2022-09-05
- 0.0.6 — 2022-09-04
- 0.0.5 — 2022-08-14
- 0.0.4 — 2022-08-14
- 0.0.3 — 2022-08-14
- 0.0.2 — 2022-08-14
- 0.0.1 — 2022-08-14
- 0.0.0 — 2022-08-14

## README

# Unis Transition

Transition component for unis inspired by  `React Transition Group`.

## Install

```shell
npm i @unis/transition
```

## Usage

```javascript
import { useState } from '@unis/unis';
import { CSSTransition, TransitionGroup } from '@unis/transition'

const App = () => {
  let [visible, setVisible] = useState(false);

  const handleToggle = () => {
    setVisible(!visible);
  }

  return () => (
    <Fragment>
      <button onClick={handleToggle}>toggle</button>
      <CSSTransition in={visible} timeout={400} classNames="fade">
        <div>
          hello
        </div>
      </CSSTransition>
    </Fragment>
  )
}
```

```css
.fade-appear {
  opacity: 0;
}

.fade-appear-active {
  opacity: 1;
  transition: all 0.4s ease;
}

.fade-appear-done {
  opacity: 1;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: all 0.4s ease;
}

.fade-enter-done {
  opacity: 1;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: all 0.4s ease;
}

.fade-exit-done {
  opacity: 0;
}
```

Online [demo](https://stackblitz.com/edit/vitejs-vite-4cfy2b) here

## CSSTransition

Component API as close to `React Transition Group` as possible.

### in

Show the component.

type: `boolean`
default: `false`

### mountOnEnter

By default the child component is mounted on the first `in={true}`. you can set `mountOnEnter={false}` child component will be mounted immediately with parent component.

type: `boolean`
default: `true`

### unmountOnExit

By default the child component is unmounted after it finishes exiting. you can set `unmountOnExit={false}` child component stays mounted after it reaches the 'exited' state.

type: `boolean`
default: `true`

### classNames

type:

```typescript
string | {
  appear?: string,
  appearActive?: string,
  appearDone?: string,
  enter?: string,
  enterActive?: string,
  enterDone?: string,
  exit?: string,
  exitActive?: string,
  exitDone?: string,
}
```

default: `''`

for example `classNames="fade"` it will apply classes below

- `fade-appear`, `fade-appear-active`, `fade-appear-done`
- `fade-enter`, `fade-enter-active`, `fade-enter-done`
- `fade-exit`, `fade-exit-active`, `fade-exit-done`

### onEnter

Callback fired immediately after the 'enter' or 'appear' class is applied.

type: `Function(node: HtmlElement)`

### onEntering

Callback fired immediately after the 'enter-active' or 'appear-active' class is applied.

type: `Function(node: HtmlElement)`

### onEntered

Callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.

type: `Function(node: HtmlElement)`

### onExit

Callback fired immediately after the 'exit' class is applied.

type: `Function(node: HtmlElement)`

### onExiting

Callback fired immediately after the 'exit-active' is applied.

type: `Function(node: HtmlElement)`

### onExited

Callback fired immediately after the 'exit' classes are removed and the exit-done class is added to the DOM node.

type: `Function(node?: HtmlElement)`

## TransitionGroup

Easy to use, just wrap on `CSSTransition` with key.

```javascript
<TransitionGroup>
  {list.map((item, index) => (
    <CSSTransition key={item.id} timeout={400} classNames="fade">
      <div>{item.name}</div>
    </CSSTransition>
  ))}
</TransitionGroup>
```

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