# styled-transition-group-animation

> Generate animation width styled-components and react-transition-group's CSSTransition

Latest version **2.1.0** (published 2020-04-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install styled-transition-group-animation
pnpm add styled-transition-group-animation
yarn add styled-transition-group-animation
bun add styled-transition-group-animation
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-04-03 |
| First published | 2018-03-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 3.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | sv92 |
| Maintainers | sv92 |
| Keywords | react-transition-group, CSSTransition, transition, animation, animate, styled-components |

## Links

- npm: https://www.npmjs.com/package/styled-transition-group-animation
- Repository: https://github.com/SanderV1992/Styled-Transition-Group
- Homepage: https://github.com/SanderV1992/Styled-Transition-Group#readme
- Issues: https://github.com/SanderV1992/Styled-Transition-Group/issues
- npm.io page: https://npm.io/package/styled-transition-group-animation

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^16.2.0
- [core-js](https://npm.io/package/core-js.md) ^3.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [reactstrap](https://npm.io/package/reactstrap.md) ^5.0.0-beta.2
- [styled-components](https://npm.io/package/styled-components.md) ^3.1.6
- [babel-regenerator-runtime](https://npm.io/package/babel-regenerator-runtime.md) ^6.5.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2020-04-03
- 2.0.0 — 2018-03-17
- 1.2.0 — 2018-03-16
- 1.1.2 — 2018-03-15
- 1.1.1 — 2018-03-15
- 1.1.0 — 2018-03-15
- 1.0.11 — 2018-03-15
- 1.0.10 — 2018-03-15
- 1.0.6 — 2018-03-13
- 1.0.5 — 2018-03-11
- 1.0.4 — 2018-03-11
- 1.0.3 — 2018-03-11
- 1.0.2 — 2018-03-11
- 1.0.1 — 2018-03-11
- 1.0.0 — 2018-03-11

## README

# Styled Transition Group Animation
[![Build Status](https://travis-ci.org/SanderV1992/Styled-Transition-Group.svg?branch=master)](https://travis-ci.org/SanderV1992/Styled-Transition-Group)
[![Coverage Status](https://coveralls.io/repos/github/SanderV1992/Styled-Transition-Group/badge.svg)](https://coveralls.io/github/SanderV1992/Styled-Transition-Group)

Generate animation width styled-components and react-transition-group's CSSTransition

For more information about the angular-translate project, please visit our [website](https://sanderv1992.github.io/Styled-Transition-Group).


## Install
```sh
npm install styled-transition-group-animation -S
```

## Usage
```js
<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="fade" duration={1000}>
    
          <div>
            <h6>{item}</h6>
          </div>
    
        </Transition>
    ))}
</TransitionGroup>
```

### Storybook
[https://sanderv1992.github.io/Styled-Transition-Group/public/storybook/](https://sanderv1992.github.io/Styled-Transition-Group/public/storybook/)

### API (props)
### type

* Type: `String`
* Default: `fade`
* Available types: `fade, zoom, rotate, roll`

### duration

* Type: `Number`
* Default: `1000`

### animation
* Type: `Any`
* Default: `null`

### Add more animation types (you can add more animations manually):

#### Transform
```js
const animation = {
  enter: {
    from: 'scale3d(0.3, 0.3, 0.3)',
    to: 'scale3d(2, 2, 2)',
  },
  exit: {
    from: 'initial',
    to: 'scale3d(0.3, 0.3, 0.3)',
  },
}

<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="bounce" animation={animation} duration={1000}>

          <div>
            <h6>{item}</h6>
          </div>

        </Transition>
    ))}
</TransitionGroup>
```

#### Keyframes
```js
const animation = {
  keyframes: `
      @keyframes bounceInDown {
        from, 60%, 75%, 90%, to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
          opacity: 0;
          transform: translate3d(0, -3000px, 0);
        }

        60% {
          opacity: 1;
          transform: translate3d(0, 25px, 0);
        }

        75% {
          transform: translate3d(0, -10px, 0);
        }

        90% {
          transform: translate3d(0, 5px, 0);
        }

        to {
          transform: translate3d(0, 0, 0);
        }
      }

      @keyframes bounceOutDown {
        20% {
          transform: translate3d(0, 10px, 0);
        }

        40%, 45% {
          opacity: 1;
          transform: translate3d(0, -20px, 0);
        }

        to {
          opacity: 0;
          transform: translate3d(0, 2000px, 0);
        }
      }
    `,
  enter: 'bounceInDown',
  exit: 'bounceOutDown',
}

<TransitionGroup>
    {this.props.items.map((item) => (
        <Transition key={item} type="bounce" animation={animation} duration={1000}>

          <div>
            <h6>{item}</h6>
          </div>

        </Transition>
    ))}
</TransitionGroup>
```

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