transition失效的三大原因：元素未挂载或不可绘制、起止值相同、缺少浏览器重排机会；应优先使用transform和opacity过渡，避免height/width；spa中需手动管理进出动画时序，view transitions需确保view-transition-name严格匹配且元素可见。

直接用 transition 做内容区域过渡，90% 的失败不是 CSS 写错了，而是 DOM 状态没“动起来”——元素没重排、起止值相同、或浏览器压根没拍到变化快照。

transition 不生效的三个硬性条件

浏览器只对满足全部以下条件的属性变化做过渡：

• 目标元素已挂载且可绘制（不能是 display: none 或刚 createElement 未 append）
• 起始值和结束值必须不同（比如 opacity: 0 → opacity: 1；opacity: 1 → opacity: 1 不会动）
• 两次样式设置之间必须有浏览器重排机会（否则合并为一次渲染）

常见踩坑：在 JS 中执行 el.classList.add('active') 后立刻进入下一帧，浏览器没机会读旧值。补救方式是加一行 el.offsetHeight 或 void el.offsetWidth 强制同步读取布局。

用 transform + opacity 替代 height/width 过渡

对 height 或 width 做 transition 会触发重排，卡顿明显，且 auto 值不支持过渡。正确做法是只动 transform 和 opacity：

• 初始状态设为 opacity: 0; transform: translateY(20px);
• 动画类里写 opacity: 1; transform: translateY(0);
• transition 只声明这两个属性，避免意外过渡其他值
• 移动端加 will-change: transform 提前升层，防掉帧

示例关键 CSS：

Article To Html

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

下载

.content { opacity: 0; transform: translateY(20px); transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.content.visible { opacity: 1; transform: translateY(0); }

SPA 路由切换时的退出+进入配对管理

单页应用中，新内容插入太快、旧内容还没退完，就会视觉重叠。必须手动控制时序：

• 先给当前内容加 is-exiting 类，触发退出动画
• 监听其 transitionend 事件，{ once: true } 防多次触发
• 在回调里插入新内容，并立即加 is-entering 类
• 新内容插入后，**立刻读一个布局属性**（如 newEl.scrollHeight），再加类，否则进不来动画
• 避免用 display: none 控制显隐——它不触发 transition

退出动画本身不能靠 beforeunload 实现，真刷新或关页时浏览器策略禁止任何动画。

View Transitions API 的 name 匹配失效点

启用 document.startViewTransition() 后没动画？大概率是 view-transition-name 没对上：

• 新旧元素都必须带完全相同的 style="view-transition-name: title"（大小写敏感、不可含空格、不能动态拼接）
• 旧元素在 transition 开始前不能是 opacity: 0 或 visibility: hidden，否则快照捕获失败
• DevTools → Layers 面板里看不到 ::view-transition-old 图层，基本就是 name 错了或旧元素不可见
• 框架中（如 React/Vue）要等 flushSync 或 nextTick 完成后再调 startViewTransition

最易被忽略的是：View Transitions 只对同步 DOM 更新生效，异步 fetch 后再插入内容，必须手动包裹在 startViewTransition 回调里，不能只包 JS 逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！