HTML怎么做Framer Motion_html Framer Motion动画库用法【速查】-html教程-PHP中文网

直接用 motion.div 替换原生 div 即可开启动画，但必须同时设置 initial 和 animate 才能触发入场动画；motion 支持所有 html 和 svg 标签，需一一对应替换；whilehover/whiletap 需单独配置 transition；退出动画须用 animatepresence 包裹并设 exit。

html怎么做framer motion_html framer motion动画库用法【速查】

直接用 motion.div 替换原生 div 就能开启动画能力，但光替换不设 initial 和 animate，页面加载时不会动——这是新手最常卡住的地方。

motion 组件怎么替？别漏掉 SVG 和表单元素

motion 不是只给 div 用的魔法开关，它覆盖所有标准 HTML 和 SVG 标签。你得手动把原生标签换成对应 motion 版本，React 才会识别动画 props。

div → motion.div，span → motion.span，button → motion.button
img、a、ul、li、input、textarea、label、form 全都有对应 motion 版本
svg、path、circle 等 SVG 元素也支持，比如 motion.svg 或 motion.path
不替换就直接写 motion.div 却保留原生 div，动画 props 会被忽略（React 不认）

initial / animate 必须成对出现，否则没入场效果

只写 animate，组件挂载时会“闪现”到目标状态；只写 initial，什么都不会发生。真正触发入场动画，得两者都设，且值要形成变化差。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

initial={{ opacity: 0, y: 20 }} 定义挂载前的状态（不可见 + 向下偏移）
animate={{ opacity: 1, y: 0 }} 定义挂载后的状态（可见 + 回归原位）
如果 initial 和 animate 的 key 完全一样（比如都写 y: 0），就不会产生位移动画
服务端渲染（SSR）或 React 18 并发模式下，initial 值可能被跳过，建议配合 transition={{ when: "beforeChildren" }} 显式控制时机

whileHover / whileTap 的过渡参数不能共用 animate 的 transition

whileHover 和 whileTap 是独立触发器，它们的动画节奏必须单独配 transition，否则会沿用组件级默认缓动，导致悬停/点击反馈生硬或延迟。

错误写法：<motion.button animate="{{" scale: transition="{{" type: whilehover="{{"></motion.button> —— whileHover 不会自动继承 animate 的 transition
正确写法：whileHover={{ scale: 1.05 }} transition={{ duration: 0.2, ease: "easeOut" }}，或更自然的弹簧参数：transition={{ type: "spring", stiffness: 400, damping: 17 }}
whileTap 建议加 y: 2 或 scale: 0.98 模拟按压感，避免纯颜色变化显得“没反馈”
多个属性同时变（如 scale + y + boxShadow），不同属性可设不同 transition，但需用对象嵌套写法：transition={{ scale: { duration: 0.2 }, y: { duration: 0.15 } }}

AnimatePresence 必须包裹条件渲染，且子元素要带 key 和 exit

组件卸载时想有退出动画，不能只靠 animate，必须用 AnimatePresence 包裹，并确保每个子元素有稳定 key 和显式 exit 配置。

AnimatePresence 只对通过 key 变化触发的卸载生效，用 if 或三元直接控制显示/隐藏不行
子元素必须带 key（不能是 index），且 exit 要和 initial/animate 形成反向逻辑，例如：initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }}
不设 exit，卸载时直接消失，AnimatePresence 不起作用
在 SSR 场景下，首次加载时 exit 可能被跳过，建议搭配 mode="wait" 避免闪烁