Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asbjornh/react-tiny-transition
Kind of like CSSTransitionGroup except without the "group" and very small.
https://github.com/asbjornh/react-tiny-transition
animation react transition
Last synced: 2 months ago
JSON representation
Kind of like CSSTransitionGroup except without the "group" and very small.
- Host: GitHub
- URL: https://github.com/asbjornh/react-tiny-transition
- Owner: asbjornh
- License: mit
- Created: 2017-12-03T18:09:38.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-05-02T19:43:55.000Z (almost 3 years ago)
- Last Synced: 2024-12-08T14:08:25.000Z (2 months ago)
- Topics: animation, react, transition
- Language: JavaScript
- Size: 361 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# TinyTransition
[](https://www.npmjs.com/package/react-tiny-transition)
This component adds classnames to your component when it mounts/unmounts so that you can add css transitions to it. basically the same thing as CSSTransition from [react-transition-group](https://github.com/reactjs/react-transition-group), except smaller and without dependencies.
This component does not include any transition effects; you need to add your own. See example css below.
### Browser support:
TinyTransition needs `requestAnimationFrame` ([compatibility table](https://caniuse.com/#feat=requestanimationframe)) and `element.classList` ([compatibility table](https://caniuse.com/#feat=classlist)) in order to do its thing, so make sure to add polyfills if you need to support older browsers (like IE9 and below).
### Other Tiny libraries
- [react-tiny-crossfade](https://github.com/asbjornh/react-tiny-crossfade)
- [react-tiny-collapse](https://github.com/asbjornh/react-tiny-collapse)
### Install:
```
npm install react-tiny-transition
```
## API:
**duration** : Number = `500`
The duration of your css transition (milliseconds)
---
**disableInitialAnimation** : Boolean = `false`
Disable the animation when TinyTransition mounts
---
**delay** : Number = `0`
Delay before adding classnames (milliseconds)
---
**children** : React element
Single React element
---
**classNames**: Object
Default:
```js
{
beforeEnter: "before-enter",
entering: "entering",
beforeLeave: "before-leave",
leaving: "leaving"
}
```
Classnames to use when mounting / unmounting
---
## Basic example:
```js
import TinyTransition from "react-tiny-transition";
...
{this.state.isVisible &&
}
```
## CSS example:
```css
.before-enter {
opacity: 0;
}
.entering {
transition: opacity 0.5s;
opacity: 1;
}
.before-leave {
transition: opacity 0.5s;
}
.leaving {
opacity: 0;
}
```
## Multiple elements:
In order to keep TinyTransition as tiny as possible, one child only will get classnames applied. If you want transitions on lists of things, you could try [react-flip-move](https://github.com/joshwcomeau/react-flip-move) or [react-flip-motion](https://github.com/asbjornh/react-flip-motion).