0.1.7 • Published 8 years ago
rc-animate.css v0.1.7
react-animate.css
使用react 和 postcss 包装 Animate.css，避免css命名冲突，方便react使用
install
npm install rc-animate.cssUsage
- ainmate name list:
bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
- example
import Animate from 'react-animate.css';
class DemoComponent extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<Animate animateName="zoomIn" style={{display: 'block'}}>
// you template
</Animate>
)
}
}API
Animate props
| name | description | type | default |
|---|---|---|---|
| animateName | 动画名称,必须是指定的名称或者空字符串 | String | '' |
| style | 节点样式，display 为block 或者 inline-block 时动画生效 | Object | |
| children | 动画要包裹的节点 | React.Element |