animatable
You can enable css-animation and css-transition for react-native easily.
Also works on web.
Install
npm install animatable
Usage
Transition
Animation will be triggered when specified style prop changed.
When property
option is specified behaviour is like css-transition.
const TransitionLeftView = View <TransitionLeftView onClick= this style= position: 'absolute' left: thisstateon ? 100 : 0 top: 0 width: 100 height: 100 backgroundColor: 'red' />
Screenshot
Animation
When keyframes
option is specified behaviour is like css-animation.
// define keyframes const keyframes = '0%': marginLeft: '0%' marginRight: '100%' '50%': marginLeft: '25%' marginRight: '0%' '100%': marginLeft: '100%' marginRight: '0%' const Bar = View // renderconst Indicator = <View style= width: 100 height: 20 backgroundColor: 'lightgray' > <Bar style= height: '100%' backgroundColor: 'black' /> </View>
Screenshot
Examples
1) specify property values as function
const Bar = View <Bar onClick= this enabled=thisstateenabled/>
2) Use with style-components etc.
const Bar = ` height: 100%; background-color: black;`
Options
You have to specify millisec value for duration
and delay
.
You can use property values same as described on css definitions, and default values are same as css's one of web.
Apply transition for components:
const TransitionComponent = Component
Apply animation for components:
const AnimationComponent = Component
Demo
https://yusukeshibata.github.io/animatable/
Author
Yusuke Shibata
License
MIT