transition配合opacity和visibility最稳；display和height:auto不可过渡；需显式声明初始值；JS改样式后需强制重排；max-height模拟height:auto动画；View Transitions API要求同步更新、元素已挂载且非隐藏。

transition 配合 opacity 和 visibility 是最稳、最易落地的方案；别碰 display，也别指望 height: auto 能过渡。

为什么 transition 加了没反应？先查这三件事

常见现象是 JS 切 class 或 hover 后完全没动画，根本不是浏览器不支持：

• transition 只对可插值属性生效——opacity、transform 行，display、z-index、height: auto 不行
• 基础样式里必须显式声明初始值，比如要过渡 opacity，就得先写 opacity: 1，不能只在 :hover 或目标 class 里写 opacity: 0
• JS 直接改 element.style.opacity = 0 再改回 1，中间没留重排机会，动画会跳过；加一句 void element.offsetWidth 强制同步布局就能救回来

用 opacity + visibility 替代 display 控制显隐

display: none 无法过渡，但视觉上“隐藏”又常被误当成唯一选择：

• 收起状态：设 opacity: 0 + visibility: hidden（保留布局占位）
• 展开状态：设 opacity: 1 + visibility: visible
• 如果真需要释放空间（比如避免影响下方元素），在 transitionend 事件里再设 display: none，而不是靠 CSS 过渡它
• 千万别只靠 visibility: hidden 过渡——它本身不可动画，必须搭配 opacity 或 transform

height: auto 展开/折叠？用 max-height 模拟

想让一个 <div> 内容动态展开时有高度动画，但直接写 height: auto + transition: height 必然失效：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 收起状态：设 max-height: 0 + overflow: hidden
• 展开状态：设一个足够大的 max-height（如 max-height: 500px），确保内容能完全显示
• 更健壮的做法是用 JS 测量真实 scrollHeight 后设置 max-height，动画结束后再清除内联样式
• 注意：预设值太小会裁剪内容，太大则动画时间拉长，实际体验变钝

View Transitions API 适合单页状态切换，但条件苛刻

这个 API 不是“加个属性就动”，它依赖浏览器拍两帧快照（旧状态 + 新状态），拍歪了就只剩淡入：

立即学习“前端免费学习笔记（深入）”；

• document.startViewTransition() 必须包裹**同步 DOM 更新操作**，比如 container.replaceChildren(newNode)；里面塞 await fetch() 或 setTimeout 就失效
• view-transition-name 必须在新旧元素上**完全一致**（大小写、空格、动态 ID 都算错），且元素得已挂载到 document 中——刚 createElement('div') 没 append() 就设该属性，快照捕获不到
• 旧元素在过渡开始前不能是 display: none、visibility: hidden 或 opacity: 0，哪怕 opacity: 0.001 也比彻底隐藏强

真正容易被忽略的是“可绘制状态”——很多动画失效，不是代码写错，而是旧元素在快照前或重排前已被移除、隐藏或未挂载。