{"id":14861,"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.","status":"deprecated","version":"2.9.5","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/motion","tags":["javascript","react","react-component","react-motion","motion","antd","ant-design","typescript"],"install":[{"cmd":"npm install rc-motion","lang":"bash","label":"npm"},{"cmd":"yarn add rc-motion","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-motion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for interacting with the DOM in React applications.","package":"react-dom","optional":false}],"imports":[{"note":"CSSMotion is a named export. Default import will result in 'undefined' or a different module object.","wrong":"import CSSMotion from 'rc-motion';","symbol":"CSSMotion","correct":"import { CSSMotion } from 'rc-motion';"},{"note":"While CommonJS require syntax might work, ESM named imports are the standard for modern React applications. The package ships TypeScript types for enhanced development.","wrong":"const CSSMotionList = require('rc-motion').CSSMotionList;","symbol":"CSSMotionList","correct":"import { CSSMotionList } from 'rc-motion';"},{"note":"When importing types in TypeScript, use 'import type' for clarity and to ensure type-only imports are correctly handled during transpilation.","wrong":"import { CSSMotionProps } from 'rc-motion';","symbol":"CSSMotionProps","correct":"import type { CSSMotionProps } from 'rc-motion';"}],"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."},"warnings":[{"fix":"Consider migrating to `@rc-component/motion` for continued support and updates. Be aware of potential API differences during migration, though core functionality is largely similar.","message":"The `rc-motion` package has been renamed and its active development moved to `@rc-component/motion`. While `rc-motion@2.9.5` is still available, new features and bug fixes are primarily released under the `@rc-component/motion` namespace (v1.x and above).","severity":"breaking","affected_versions":">=2.x"},{"fix":"Update your package dependencies from `rc-motion` to `@rc-component/motion` and review its changelog for any breaking changes introduced in its 1.x releases.","message":"The `rc-motion` package itself is considered deprecated. Its last major update (v2.9.5) was over two years ago. For actively maintained code, developers should transition to `@rc-component/motion`.","severity":"deprecated","affected_versions":">=2.x"},{"fix":"Ensure `removeOnLeave` prop is set to `true`. If issues persist, consider updating to `@rc-component/motion` which has addressed these types of bugs.","message":"Older versions of `rc-motion` (before fixes in `@rc-component/motion` v1.1.6) might exhibit 'DOM residue' where elements are not correctly removed from the DOM after leave animations, especially on re-activation or rapid toggling.","severity":"gotcha","affected_versions":"<=2.9.5"},{"fix":"Ensure that any child component receiving a ref is either a class component or a functional component wrapped with `React.forwardRef`. If using an older `rc-motion` version, this might require manual ref handling or migrating to `@rc-component/motion` for the fixes.","message":"Issues with ref forwarding to children wrapped by `CSSMotion` have been observed and fixed in later versions of `@rc-component/motion`. If you pass a ref directly to a functional child component within `CSSMotion`, it might not work as expected.","severity":"gotcha","affected_versions":"<=2.9.5"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use a named import: `import { CSSMotion } from 'rc-motion';`","cause":"Incorrect import statement for the CSSMotion component.","error":"ReferenceError: CSSMotion is not defined"},{"fix":"Wrap the child functional component with `React.forwardRef` to allow it to correctly receive and forward refs.","cause":"A functional component passed as a child to CSSMotion is attempting to receive a ref directly.","error":"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"},{"fix":"Set the `removeOnLeave` prop on `CSSMotion` to `true`. If the issue persists with `rc-motion@2.9.5`, consider migrating to `@rc-component/motion`.","cause":"The `removeOnLeave` prop is not enabled, or a bug in older versions prevents proper cleanup.","error":"Element persists in the DOM after its leave animation finishes, even if it's no longer visible."},{"fix":"Ensure your render prop looks like `{({ className, style }) => <div className={className} style={style} />}` to correctly apply the motion styles.","cause":"The render prop function for `CSSMotion` is not correctly destructuring and passing the `className` or `style` props to the rendered element.","error":"TypeError: Cannot read properties of undefined (reading 'className') (or 'style')"}],"ecosystem":"npm"}