# transitioned

> enable react-native css transition

Latest version **1.0.4** (published 2018-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install transitioned
pnpm add transitioned
yarn add transitioned
bun add transitioned
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-02-09 |
| First published | 2018-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 92 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yusuke Shibata |
| Maintainers | yusukeshibata |

## Links

- npm: https://www.npmjs.com/package/transitioned
- npm.io page: https://npm.io/package/transitioned

## Dependencies (3)

- [animated](https://npm.io/package/animated.md) ^0.2.1
- [gl-matrix](https://npm.io/package/gl-matrix.md) ^2.4.0
- [parse-css-transition](https://npm.io/package/parse-css-transition.md) ^0.0.1

## Recent versions

- 1.0.4 (latest) — 2018-02-09
- 1.0.3 — 2018-02-08
- 1.0.2 — 2018-02-08
- 1.0.1 — 2018-02-07
- 1.0.0 — 2018-02-07

## README

# transitioned

react-native transition enabler.

### Install

```sh
npm install transitioned
```

### Simple

```js
import transitioned from 'transitioned'
import { View } from 'react-native'

const Toggle = ({ on, ...props }) => <View style={{
  width: 24,
  height: 24,
  margin: 2,
  bordeRadius: 12,
  overflow: 'hidden',
  backgroundColor: on ? 'white' : 'gray',
  position: 'absolute',
  top: 0,
  left: on ? 22 : 0
}} />

// transition style value
const TransitionedToggle = transitioned('left 0.1s linear')(Toggle)

// can be multiple
const TransitionedToggle = transitioned('left 0.1s linear,opacity 0.5s ease-in')(Toggle)

// transition style value as object
const TransitionedToggle = transitioned({
  name: 'left',
  duration: '0.1s',
  timingFunction: 'linear',
  delay: '0.1s'
})(Toggle)

// transition style value as object
const TransitionedToggle = transitioned([
  {
    name: 'left',
    duration: '0.1s',
    timingFunction: 'linear',
    delay: '0.1s'
  },
  {
    name: 'opacity',
    duration: '0.2s',
    timingFunction: 'linear'
  },
])(Toggle)

<!-- TODO:
// or with function
const TransitionedToggle = transitioned(prop => `left ${prop.duration} linear`)(Toggle)
-->

// changing `on` value cause transitioned animation.
<TransitionedToggle duration='2s' on={true|false} />

```

### With `styled-components`

```js
import transitioned from 'transitioned'
import styled from 'styled-components'
import { View } from 'react-native'

const Toggle = styled(
  // enabled transition for View
  transitioned('left 0.1s linear')(View)
)`
  width: 24px;
  height: 24px;
  margin: 2px;
  border-radius: 12px;
  overflow: hidden;
  background-color: ${props => props.on ? 'white' : 'gray'};
  position: absolute;
  top: 0;
  left: ${props => props.on ? 22 : 0}px;
`
```

### Author

Yusuke Shibata

### License

MIT

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