rc-motion

    2.4.4 • Public • Published

    rc-motion

    NPM version npm download build status Codecov Dependencies DevDependencies bundle size

    React lifecycle controlled motion library.

    Live Demo

    https://react-component.github.io/motion/

    Install

    rc-motion

    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 start
    

    License

    rc-motion is released under the MIT license.

    Install

    npm i rc-motion

    DownloadsWeekly Downloads

    733,471

    Version

    2.4.4

    License

    MIT

    Unpacked Size

    90.6 kB

    Total Files

    58

    Last publish

    Collaborators

    • afc163
    • zombiej
    • 07akioni