2.9.0 • Published 8 months ago
rc-motion v2.9.0
rc-motion
React lifecycle controlled motion library.
Live Demo
https://react-component.github.io/motion/
Install
Example
import CSSMotion from 'rc-motion';
export default ({ visible }) => (
<CSSMotion visible={visible} motionName="my-motion">
{({ className, style }) => <div className={className} style={style} />}
</CSSMotion>
);API
CSSMotion
| Property | Type | Default | Description |
|---|---|---|---|
| motionName | string | - | Config motion name, will dynamic update when status changed |
| visible | boolean | true | Trigger motion events |
| motionAppear | boolean | true | Use motion when appear |
| motionEnter | boolean | true | Use motion when enter |
| motionLeave | boolean | true | Use motion when leave |
| motionLeaveImmediately | boolean | - | Will trigger leave even on mount |
| motionDeadline | number | - | Trigger motion status change even when motion event not fire |
| removeOnLeave | boolean | true | Remove element when motion leave end |
| leavedClassName | string | - | Set leaved element className |
| onAppearStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear start, return style will patch to element |
| onEnterStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter start, return style will patch to element |
| onLeaveStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave start, return style will patch to element |
| onAppearActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear active, return style will patch to element |
| onEnterActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter active, return style will patch to element |
| onLeaveActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave active, return style will patch to element |
| onAppearEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when appear end, will not finish when return false |
| onEnterEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when enter end, will not finish when return false |
| onLeaveEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when leave end, will not finish when return false |
CSSMotionList
extends all the props from CSSMotion
| Property | Type | Default | Description |
|---|---|---|---|
| keys | React.Key[] | - | Motion list keys |
| component | string | React.ComponentType | div | wrapper component |
Development
npm install
npm startLicense
rc-motion is released under the MIT license.
2.9.0
8 months ago
2.8.0
8 months ago
2.7.0
1 year ago
2.7.2
1 year ago
2.7.1
1 year ago
2.7.3
1 year ago
2.6.3
1 year ago
2.6.1
2 years ago
2.6.2
2 years ago
2.6.0
2 years ago
2.5.0
2 years ago
2.5.1
2 years ago
2.4.7
2 years ago
2.4.6
2 years ago
2.4.9
2 years ago
2.4.8
2 years ago
2.4.5
2 years ago
2.4.4
3 years ago
2.4.3
3 years ago
2.4.2
3 years ago
2.4.1
3 years ago
2.4.0
3 years ago
2.3.4
3 years ago
2.3.3
4 years ago
2.3.2
4 years ago
2.3.1
4 years ago
2.3.0
4 years ago
2.1.2
4 years ago
2.2.0
4 years ago
2.1.1
4 years ago
2.1.0
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago