答案：opacity、transform、color、background-color、box-shadow、max-height等可插值数值属性能真正平滑过渡；display、visibility、height:auto、font-family等不可插值或触发重排的属性不能。
哪些CSS属性能真正过渡动画
不是所有CSS属性都能被transition平滑变化。浏览器只对“可插值”（interpolatable）的数值型属性做补间动画，比如opacity、transform、color、background-color、font-size。而像display、visibility、height（设为auto时）、font-family这些，要么无法插值，要么会强制重排，直接过渡会失效或卡顿。
常见可过渡属性清单：
-
opacity：安全、高性能，常用于淡入淡出 -
transform（含translateX、scale、rotate等）：硬件加速，不触发重排，推荐作为位移/缩放首选 -
color/background-color：支持RGB、HSL、hex，但不支持transparent到颜色的跨模型过渡（如transparent→#ff0可能跳变） -
box-shadow：可过渡偏移、模糊度、颜色，适合悬停浮起效果 -
max-height：唯一能模拟height展开收起的技巧（但需设具体数值，不能用auto）
按钮悬停、菜单展开这些基础交互怎么写才不翻车
90% 的transition失效不是写错了 CSS，而是 DOM 状态没“动起来”。例如：button:hover 里改了background-color却没反应，大概率是元素没渲染完成、或起止值相同（比如两个都是rgb(0, 0, 0)）。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 确保伪类状态真实触发：用 DevTools 的 :hover 强制模拟，确认样式计算无误
- 避免在 JS 中连续修改样式后立刻期望动画：如
el.classList.add('active'); el.style.opacity = '1';，应拆成两帧，中间加el.offsetHeight强制读取布局 - 菜单展开别碰
height：用max-height: 0→max-height: 300px替代；更稳的做法是用transform: scaleY(0)→transform: scaleY(1)+opacity - 悬停按钮加
will-change: transform提前升层，尤其在移动端防掉帧
内容区域切换（SPA 路由/Tab 切换）为什么动画总卡顿或重叠
单页应用中，新内容插入太快、旧内容还没退完，视觉上就堆在一起。这不是 CSS 写得不对，而是时序没管住。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键动作必须手动控制：
- 退出阶段：给当前内容加
is-exiting类，触发动画；监听transitionend事件（带{ once: true }） - 进入阶段：在
transitionend回调里插入新 DOM 节点，**插入后立刻读一个布局属性**（如newEl.scrollHeight），再加is-entering类——否则浏览器合并渲染，进不来动画 - 永远别用
display: none控制显隐：它绕过渲染流水线，transition压根不生效 - View Transitions 是新出路，但要求
view-transition-name严格匹配且元素必须已挂载、可见
为什么用 transform + opacity 就比 width/height 流畅
width和height变化会触发 layout（重排），浏览器要重新计算整个文档流，性能开销大，尤其在低端设备或复杂布局中容易掉帧。而transform和opacity只影响合成层（compositing layer），走 GPU 加速路径，不打断主线程。
典型错误写法：transition: height 0.3s, opacity 0.3s —— 只要height在动，整块区域就重排。
正确姿势：
- 初始状态：
opacity: 0; transform: translateY(20px) scale(0.95); - 激活状态：
opacity: 1; transform: translateY(0) scale(1); -
transition只声明这两个属性：transition: opacity 0.4s, transform 0.4s; - 移动端加
will-change: transform提示浏览器预分配图层
最易被忽略的一点：即使你写了transform，如果父容器有overflow: hidden且子元素超出裁剪边界，动画仍可能降级到软件渲染——检查 DevTools 的 Layers 面板确认是否真上了合成层。
