IE11中使用视口单位时CSS transition出现异常问题

我之前也踩过IE11这个坑！当你用JavaScript/jQuery修改元素属性来触发CSS过渡（transition）时，如果过渡属性依赖了视口单位（比如vw、vh、vmin、vmax），IE11会直接跳过过渡动画，元素瞬间切换到目标状态；但换成px、%、em这类单位，过渡效果就能正常运行。

问题根源 #

IE11对CSS过渡和视口单位的组合支持存在兼容性bug，它无法正确识别基于视口单位的属性变化，导致过渡逻辑直接失效。

错误示例（IE11下无过渡效果） #

假设你有这样的样式和脚本：

.target-box {
  width: 40vw;
  transition: width 0.4s ease-in-out;
}

// 通过jQuery修改宽度触发过渡
$('.target-box').css('width', '70vw');

这段代码在Chrome、Firefox等现代浏览器里能看到平滑的宽度变化，但在IE11中，元素宽度会直接从40vw跳到70vw，完全没有过渡动画。

可用修复示例（兼容IE11） #

解决思路很简单：把视口单位替换成IE11能正确处理的单位，比如像素或百分比。如果需要保留视口相关的动态效果，可以先将视口单位换算成像素值再设置。

方案1：直接使用百分比单位

.target-box {
  width: 40%;
  transition: width 0.4s ease-in-out;
}

$('.target-box').css('width', '70%');

方案2：将视口单位换算为像素

如果布局逻辑必须依赖视口尺寸，可以先计算对应像素值：

.target-box {
  width: 40vw;
  transition: width 0.4s ease-in-out;
}

// 计算80vw对应的像素值
const targetWidth = window.innerWidth * 0.8;
$('.target-box').css('width', `${targetWidth}px`);

这样修改后，IE11就能正常播放过渡动画了。

额外提示 #

如果你的页面布局大量依赖视口单位，可以在页面加载完成时，一次性把所有需要过渡的元素的视口单位属性转换成像素值，后续的动态修改都基于像素操作，就能彻底避开IE11的这个兼容性问题。

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