vtg

velocity-transition-group

Velocity.js based replacement for ReactCSSTransitionGroup

Showing:

Popularity

Downloads/wk

34

GitHub Stars

17

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

4

Size (min+gzip)

71.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

VelocityTransitionGroup

This is a replacement for React's ReactCSSTransitionGroup addon that uses velocity.js for animations instead of CSS.

Warning

Many other libraries have popped up since this one that accomplish the same thing and more.

I'd recommend looking at velocity-react before using this. It is likely more up to date with the latest React, and includes other components and features that make working with Velocity in React much easier.

Installation:

npm install velocity-transition-group

Simple Example:

import VelocityTransitionGroup from `velocity-transition-group`;

let overlayStyles = {
  backgroundColor: '#000',
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
};

let OverlayComponent = React.createClass({
  render() {
    return (
      <VelocityTransitionGroup
        appear={{opacity: [1, 0]}}
        leave={{opacity: 0}}
        easing='linear'
        duration={250}
      >
        <div style={overlayStyles} />;
      <VelocityTransitionGroup/>
    )
  }
});

Based heavily on @tkafka's react-VelocityTransitionGroup

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