CSS transition属性失效，窗口缩放时图片宽度无平滑过渡求排查

嘿，我来帮你搞定这个transition不生效的问题！你的核心问题出在父元素<div>的宽度没有跟着窗口大小变化，导致图片的百分比宽度根本没发生改变，transition自然就没机会跑起来。

具体来说，你给div设置了display: inline-block，这种布局下元素的默认宽度是由内部内容（也就是那两张图片）的宽度决定的，不会自动占满整个浏览器视口。所以当你拖拽窗口调整大小时，div的宽度纹丝不动，图片的width:25%是相对于这个固定宽度的div计算的，数值自然也不会变，transition动画就没有触发的条件啦。

下面给你两个可行的解决方案：

方案一：让父元素随窗口宽度变化 #

把div的display改成block，再加上width: 100%，让它的宽度完全贴合视口。这样窗口调整时，div宽度跟着变，图片的百分比宽度计算值也会同步改变，transition就能正常触发了。修改后的代码如下：

div{ 
  display: block; 
  width: 100%;
}
img { 
  width:25%; 
  -webkit-transition: width 20s; /* 兼容Safari旧版本 */
  transition: width 20s; 
}

<div> 
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris"> 
  <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris"> 
</div>

方案二：用视口单位直接绑定图片宽度 #

如果你想保留div的inline-block布局，可以把图片的宽度单位换成视口单位vw（1vw等于视口宽度的1%），这样图片宽度直接和浏览器窗口挂钩，不需要依赖父元素的宽度。代码修改如下：

div{ 
  display: inline-block; 
}
img { 
  width:25vw; /* 相当于视口宽度的25% */
  -webkit-transition: width 20s; 
  transition: width 20s; 
}

这样调整窗口大小时，图片的宽度会平滑过渡，完美实现你想要的效果~

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