17370845950

transition在Safari/旧Edge不生效主因是属性不支持过渡或触发时机不当；应明确列出可动画属性、避免all简写、强制重排、慎用will-change，并注意浏览器版本差异。

transition 属性在 Safari 或旧版 Edge 不生效

多数情况是 CSS transition 写法本身没问题，但目标属性不支持过渡，或浏览器对某些值的解析存在差异。Safari（尤其 iOS 15 及更早）和旧版 Edge（EdgeHTML 内核）对 transform、opacity 等属性的过渡支持较严格，且不接受简写中混用不支持过渡的属性。

• 避免在 transition 简写中写

  

  all，改用明确列出可过渡属性，例如：transition: opacity 0.3s, transform 0.3s;
• Safari 对 transform: scale(1) → scale(1.2) 支持良好，但对 transform: translateX(0px) → translateX(10px) 在某些 flex 容器中可能跳变，建议加 will-change: transform; 提前提示渲染引擎
• 旧版 Edge 不支持 transition 作用于自定义 CSS 变量（--my-color），需回退为直接控制 color 或 background-color

触发 transition 的状态变更没被浏览器识别

常见于 JS 动态添加 class 后立即修改样式，或 DOM 更新未触发重排（reflow）。浏览器可能合并操作，跳过中间状态，导致过渡不播放。

• 确保 class 切换与样式变更之间有微小延迟，例如用 setTimeout(() => { element.classList.add('active'); }, 0);
• 更可靠的做法是强制触发重排：在添加 class 后读取一次 offsetHeight 或 getComputedStyle(element).opacity，让浏览器“确认当前状态”再开始过渡
• 避免在同一个事件循环中连续设置 element.style.transition = '...' 和 element.style.transform = '...'，应先设好 transition，再通过 class 或 style 更改可动画属性

使用 will-change 导致 Chrome 正常但 Firefox/Safari 卡顿或失效

will-change 是提示性属性，不是动画开关。过度或错误使用反而会禁用硬件加速，或在部分 Safari 版本中导致过渡完全不触发。

• 只对真正需要频繁动画的元素设置 will-change: transform; 或 will-change: opacity;，不要设 will-change: all;
• Safari 16.4+ 修复了部分 will-change 与 transition 冲突问题，但 iOS 15 及更早仍建议移除该声明后测试
• 若过渡在 Firefox 中失效，检查是否同时设置了 contain: paint; —— 某些版本 Firefox 会因此忽略 transition，临时移除可验证

/* 推荐的跨浏览器过渡写法示例 */
.button {
  opacity: 0.7;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* 不加 will-change，除非实测必要 */
}
.button:hover {
  opacity: 1;
  transform: scale(1.05);
}

兼容性问题往往卡在“看起来该动却不动”的那一帧，重点盯住触发时机、属性支持范围和浏览器私有行为差异。