ttg

timeout-transition-group

a better React Transition Group than CSSTransitionGroup

Showing:

Popularity

Downloads/wk

48

GitHub Stars

16

Maintenance

Last Commit

5yrs ago

Contributors

6

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Deprecated

Use react-addons-css-transition-group instead as it supports transitionEnterTimeout and transitionLeaveTimeout.


timeout-transition-group

A React Transition Group better than CSSTransitionGroup.

This library is originally created by Khan Academy at timeout-transition-group. Many thanks to Khan Academy!

Why TimeoutTransitionGroup instead of CSSTransitionGroup?

CSSTransitionGroup, provided as a React addon, is buggy. Sometimes the animated component that is supposed to leave does not leave.

This is because CSSTransitionGroup component listens to CSS transitionend event which are not always sent. TimeoutTransitionGroup fixes this bug by setting the timeout of animation.

How to install

npm i --save timeout-transition-group

Use v2 or above for React 0.14, v1 for 0.13, and v0 for React 0.12.

How to use

It's the quite similar to CSSTransitionGroup with two additional props, enterTimeout and leaveTimeout. The values are in millisecond:

<TimeoutTransitionGroup
  enterTimeout={200}
  leaveTimeout={250}
  transitionName="transitionName">
  <div key="hello-world">Hello world!</div>
</TimeoutTransitionGroup>

License

MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial