react prop transition
A component for easing props values
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.
Getting started
Install react-prop-transition using npm.
npm install react-prop-transition --save
Usage
; <Transition props=number: 0 duration=400 easing="cubic" > <span>propsnumber</span></Transition>
Api
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 |