Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sanv92/styled-transition-group
Generate animation width styled-components and react-transition-group's CSSTransition
https://github.com/sanv92/styled-transition-group
Last synced: about 2 months ago
JSON representation
Generate animation width styled-components and react-transition-group's CSSTransition
- Host: GitHub
- URL: https://github.com/sanv92/styled-transition-group
- Owner: sanv92
- Created: 2018-03-11T16:33:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T00:45:25.000Z (over 2 years ago)
- Last Synced: 2024-11-08T11:12:27.802Z (2 months ago)
- Language: JavaScript
- Homepage: https://sanderv1992.github.io/Styled-Transition-Group/
- Size: 1.17 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Styled Transition Group Animation
[](https://travis-ci.org/SanderV1992/Styled-Transition-Group)
[](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
{this.props.items.map((item) => (
{item}
))}
```
### 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)',
},
}
{this.props.items.map((item) => (
{item}
))}
```
#### 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',
}
{this.props.items.map((item) => (
{item}
))}
```