README.md



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;
-


onEnterStart
(HTMLElement, Event) => CSSProperties \
void;
-


onLeaveStart
(HTMLElement, Event) => CSSProperties \
void;
-


onAppearActive
(HTMLElement, Event) => CSSProperties \
void;
-


onEnterActive
(HTMLElement, Event) => CSSProperties \
void;
-


onLeaveActive
(HTMLElement, Event) => CSSProperties \
void;
-


onAppearEnd
(HTMLElement, Event) => boolean \
void;
-


onEnterEnd
(HTMLElement, Event) => boolean \
void;
-


onLeaveEnd
(HTMLElement, Event) => boolean \
void;
-


CSSMotionList

extends all the props from CSSMotion


Property
Type
Default
Description


keys
React.Key[]
-
Motion list keys


component
string \
React.ComponentType
div


Development

npm install
npm start


License

rc-motion is released under the MIT license.