Back to Details

motion-v13

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Motion

Motion

Package: 
motion
^13 (formerly 
framer-motion
). Import from 
motion/react
, not 
framer-motion
.
Folder major tracks the npm 
motion
package, not a skill-file revision. This repo may not list 
motion
in 
package.json
(CSS/
tw-animate-css
first); keep 
motion-v13
so 
pnpm add motion
stays aligned. Do not invent 
-v1
for libraries that have an npm major.
包：
motion
^13（原 
framer-motion
）。从 
motion/react
导入，而不是 
framer-motion
。
文件夹主版本号跟随 npm 
motion
包，而不是 skill 文件修订版本。此仓库的 
package.json
中可能未列出 
motion
（应优先使用 CSS/
tw-animate-css
）；保留 
motion-v13
，以确保与 
pnpm add motion
安装的版本保持一致。不要为已有 npm major 版本的库杜撰 
-v1
后缀。

When

适用场景

Use for drag, scroll-linked, layout, gestures, shared-element transitions. Prefer CSS/
tw-animate-css
first (see @.cursor/rules/frontend/design.mdc).
用于拖拽、滚动联动、布局、手势和共享元素过渡。优先使用 CSS/
tw-animate-css
（见 @.cursor/rules/frontend/design.mdc）。

Install

安装

pnpm add motion
— import 
{ motion, AnimatePresence } from "motion/react"
.
Motion 13 dropped 
@emotion/is-prop-valid
as an optional dependency. If styled 
motion
components leak CSS-in-JS props to the DOM, inject 
isValidProp
via 
MotionConfig
or compose 
motion.create(StyledDiv)
. See https://motion.dev/docs/react-upgrade-guide
pnpm add motion
— 从 
motion/react
导入 
{ motion, AnimatePresence }
。
Motion 13 移除了 
@emotion/is-prop-valid
这一可选依赖。如果样式化的 
motion
组件将 CSS-in-JS 属性泄漏到 DOM，请通过 
MotionConfig
注入 
isValidProp
，或组合 
motion.create(StyledDiv)
。参见 https://motion.dev/docs/react-upgrade-guide

Depth

深入内容

  • Corrections vs old Framer Motion APIs: rules/motion.md
  • Patterns: references/common-patterns.md
  • Next.js 
    'use client'
    : references/nextjs-integration.md
  • Perf: references/performance-optimization.md
  • 旧 Framer Motion API 的修正：rules/motion.md
  • 模式：references/common-patterns.md
  • Next.js 
    'use client'
    ：references/nextjs-integration.md
  • 性能优化：references/performance-optimization.md