浏览器动画抖动主因是重排与合成层异常，如height过渡引发亚像素舍入跳变、transform与top混用导致定位冲突，应改用max-height、统一用transform、禁用几何属性过渡并优化第三方库交互。
过渡效果抖动不是 CSS 写错了，而是浏览器在动画过程中被反复拖进重排（reflow）或层合成异常导致的视觉跳变。核心问题通常出在 height、top、left 这类触发布局计算的属性上，或者 transform 与 top 混用造成定位基准冲突。
为什么 height 过渡会抖文本？
当容器用 height 做过渡时，内部文本行高（line-height）若为小数（如 1.3 × 15px = 19.5px），浏览器渲染时会做亚像素对齐，而每次重绘的舍入策略不一致，导致文字上下微跳。更严重的是，height 变化会强制同步重排，打断 GPU 合成流程。
避免方式：
- 改用
max-height+overflow: hidden替代height，只要值设得足够大（如max-height: 500px），过渡就只走合成层 - 确保
line-height是整数（如line-height: 20px或line-height: 1.333→ 计算后为整数） - 加
will-change: transform提前升层，但仅对动画元素单点启用，别全局写
transform 和 top 混用必抖
比如非悬停态写 top: 0，悬停态加 transform: translateY(-20px)，两者定位机制不同：top 是布局内偏移，transform 是渲染层偏移。浏览器无法平滑插值，回退时会出现“先弹回再飞走”的错位感。
统一方案：
- 全程只用
transform：基础态设transform: translateY(0)，悬停态改transform: translateY(-20px) - 显式声明
transform-origin，避免缩放/旋转时因默认原点偏移引发跳帧 - 禁用
top/left等几何属性参与过渡，它们不走合成层
Isotope / Masonry 类库排序时抖动
这类布局库依赖精确的 left/top/transform 控制元素位置。如果你给 .item 元素写了 transition: all .3s，它就会和库内部的 transform 动画打架，导致元素在重排瞬间“晃一下”。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
正确做法：
- 删掉所有对
.item的通用transition声明 - 只对真正需要动画的子属性单独加过渡，例如：
transition: background-color .2s, opacity .2s - 如果要用 hover 缩放，确保父容器有
overflow: hidden，防止缩放溢出干扰布局流
路由切换过渡没动画或闪一下
SPA 中加了 transition 却没反应，常见原因是 DOM 没“重置”：新内容插入后，浏览器认为样式没变，直接跳到终态；或者旧元素提前被 display: none 或 opacity: 0 隐藏，导致 View Transitions API 捕获不到快照。
关键动作：
- 插入新内容后，立刻读一个布局属性（如
el.scrollHeight或el.offsetHeight），强制触发一次重排，让浏览器记住起始态 - 旧元素必须保持可见（至少
opacity: 1），且带匹配的style="view-transition-name: xxx" - 别在
pushState后立刻操作 DOM，等requestAnimationFrame下一帧再开始动画
真正难处理的抖动，往往藏在第三方组件的 mounted 钩子里——它们悄悄调用 clientHeight 或 getBoundingClientRect()，你根本看不到源码。Performance 面板里看 Layout 事件密度，比盯着自己写的 CSS 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
