IE与Edge浏览器中CSS transition属性失效问题求助

我完全懂你遇到的糟心情况——好好的transition在Chrome、Firefox里丝滑生效，到了IE和老版Edge就直接“罢工”，哪怕加了-ms-前缀也没用。结合你提到的switch-handle元素，我整理了几个针对性的排查方向和修复方案：

1. 前缀要和属性配对使用 #

老版IE（IE10+）和Edge Legacy对前缀的要求很严格，不能只给transition加-ms-前缀，过渡的目标属性也要对应加前缀。比如你用了transform，就得这么写：

.switch-handle {
  /* 标准浏览器写法 */
  transition: transform 0.3s ease;
  /* IE/Edge Legacy 兼容写法 */
  -ms-transition: -ms-transform 0.3s ease;
}

如果是过渡left这类基础属性，虽然不需要属性前缀，但-ms-transition还是要加上：

.switch-handle {
  transition: left 0.3s ease;
  -ms-transition: left 0.3s ease;
}

2. 必须明确元素的初始状态 #

IE/Edge对transition的触发条件格外挑剔，如果元素要过渡的属性没有明确的初始值，浏览器可能不会识别变化。比如你要过渡位置，就得把初始位置写死：

.switch-handle {
  position: absolute;
  left: 0; /* 明确初始值，不能让浏览器默认计算 */
  transition: left 0.3s ease;
  -ms-transition: left 0.3s ease;
}
.switch-handle.active {
  left: 60px; /* 目标值 */
}

3. 强制触发浏览器重绘 #

有时候JS动态修改类名时，IE/Edge会“偷懒”不捕捉属性变化，这时候可以强制让浏览器重绘元素：

// 假设你是通过添加active类触发过渡
child[1].classList.add('active');
// 加这一行强制重绘，触发transition
void child[0].offsetWidth;

offsetWidth会让浏览器重新计算元素布局，自然就能触发过渡效果了。

4. 避开IE不支持的过渡场景 #

IE/Edge不支持从display: none切换到display: block时触发transition，如果你是用这种方式控制元素显示/隐藏，建议换成opacity+visibility的组合：

.switch-handle {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  -ms-transition: opacity 0.3s ease, visibility 0.3s ease;
}
.switch-handle.active {
  opacity: 1;
  visibility: visible;
}

针对你代码片段的额外提示 #

从你给出的JS片段来看，你是通过修改复选框的checked状态和类名触发过渡。建议再检查：

• switch-handle的初始CSS属性（比如位置、transform）是否明确设置
• 过渡的属性是否在IE/Edge支持列表里（比如用transform: translateX()代替left，兼容性会更好）

内容的提问来源于stack exchange，提问作者Shanmugaraja_K