Heavily inspired by React Motion. The <Transition>
component will proxy
props to a single functional child. When Transition receives new props it
will interpolate values on each animation frame until complete or interrupted.
The props object can be any object permitted by d3.interpolateObject
. In practice
this allows for transitions of numbers, arrays, colors (as understood by CSS)
and much more.
Install react-prop-transition using npm.
npm install react-prop-transition --save
import Transition from 'react-prop-transition';
<Transition props={{number: 0}}
duration={400}
easing="cubic" >
{(props) => <span>{props.number}</span>}
</Transition>
Props | Description |
---|---|
props |
The props object to be eased. Permitted values can be numbers, colors, arrays, dates and strings with a numerical element. #d3.interpolateObject |
easing (optional) |
Specifies the easing function as a string. Permitted options |
duration (optional) |
The easing duration in ms |