{"library":"rc-motion","title":"React Lifecycle Motion","description":"rc-motion is a React library designed to provide granular control over component entry, exit, and update animations by leveraging React's lifecycle methods. It enables developers to integrate CSS transition classes or custom JavaScript animation callbacks to manage the visual state of components as they appear, enter, leave, or disappear from the DOM. The package, at version 2.9.5, offers a robust set of features for orchestrating complex animation sequences and serves as a foundational component within the Ant Design ecosystem. Its API, centered around properties like `motionName`, `visible`, and comprehensive lifecycle callbacks (`onAppearStart`, `onEnterEnd`, etc.), emphasizes precise control over animation flow. However, developers should be aware that this specific package (`rc-motion`) has been superseded by `@rc-component/motion` (v1.x), which represents its actively maintained and developed successor.","language":"javascript","status":"deprecated","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-motion"],"cli":null},"imports":["import { CSSMotion } from 'rc-motion';","import { CSSMotionList } from 'rc-motion';","import type { CSSMotionProps } from 'rc-motion';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { CSSMotion } from 'rc-motion';\n\nfunction MyAnimatedComponent() {\n  const [visible, setVisible] = useState(true);\n\n  return (\n    <div>\n      <button onClick={() => setVisible(prev => !prev)}>\n        Toggle Motion\n      </button>\n      <CSSMotion\n        visible={visible}\n        motionName=\"my-fade\"\n        onAppearStart={() => console.log('Appear Start')}\n        onAppearActive={() => console.log('Appear Active')}\n        onAppearEnd={() => console.log('Appear End')}\n        onEnterStart={() => console.log('Enter Start')}\n        onEnterActive={() => console.log('Enter Active')}\n        onEnterEnd={() => console.log('Enter End')}\n        onLeaveStart={() => console.log('Leave Start')}\n        onLeaveActive={() => console.log('Leave Active')}\n        onLeaveEnd={() => console.log('Leave End')}\n        removeOnLeave={true}\n      >\n        {({ className, style }) => (\n          <div\n            className={className}\n            style={{ ...style, padding: '20px', border: '1px solid blue', backgroundColor: 'lightblue' }}\n          >\n            Hello, Motion!\n          </div>\n        )}\n      </CSSMotion>\n    </div>\n  );\n}\n\nexport default MyAnimatedComponent;","lang":"typescript","description":"Demonstrates basic usage of CSSMotion with state-driven visibility, custom motion classes, and lifecycle callbacks.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}