react-late-arrival
A React component for making transitions to the real state
(日本語)
Installation
It can not be used directly by the browser.
You need to use a bundler like browserify/webpack.
npm install --save react-late-arrival
Usage
If you animate this component..
; Component { return <div style= color: thispropscolor > thispropsmessage </div>; }
..then wrap by LateArrival
meta-component with both realProps
and transitions
.
; const realProps = color: 'black' message: 'Finish'; const transitions = duration: 1000 color: 'red' message: 'One' duration: 500 color: 'green' message: 'Two' duration: 250 color: 'blue' message: 'Three' ; const transitionalMessage = <LateArrival realProps= realProps transitions= transitions > <MyAwesomeMessage ...props /> </LateArrival>;
In this case, the component will change like this:
1. red "One"
|
(1000ms)
|
2. green "Two"
|
(500ms)
|
3. blue "Three"
|
(250ms)
|
4. black "Finish"
Features
- Without changing the original components, you can apply a simple flip animation, such as a cartoon
- If you set
[]
totransitions
, that is same as normal rendering