English | 简体中文

Highlights

• Declarative CSSMotion component for appear, enter, and leave states.
• CSSMotionList for keyed list transitions.
• CSS class lifecycle hooks and inline style patching callbacks.
• Optional deadline fallback when transition or animation events do not fire.
• TypeScript definitions and React ref support.
• Used by Ant Design components that need predictable motion lifecycles.

Install

npm install @rc-component/motion

Usage

import CSSMotion from '@rc-component/motion';

export default ({ visible }: { visible: boolean }) => (
  <CSSMotion visible={visible} motionName="fade">
    {({ className, style }, ref) => (
      <div ref={ref} className={className} style={style}>
        Content
      </div>
    )}
  </CSSMotion>
);

import { CSSMotionList } from '@rc-component/motion';

export default ({ keys }: { keys: string[] }) => (
  <CSSMotionList keys={keys} motionName="fade">
    {({ key, className, style }, ref) => (
      <div ref={ref} key={key} className={className} style={style}>
        {key}
      </div>
    )}
  </CSSMotionList>
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

CSSMotion

CSSMotionList

CSSMotionList accepts the motion props above, except children is a list render function.

Ref

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/motion is released under the MIT license.