CSS transition首次触发不生效，仅第二次及后续触发正常该如何解决？

问题根因 #

CSS transition 生效的前提是属性的起始值和结束值都是明确可计算的固定值。你的代码里.Container初始状态没有设置明确的width属性，默认是width: auto，第一次点击修改width时，浏览器无法完成auto到百分比宽度的过渡计算，就会直接跳转样式。从第二次点击开始，你已经通过JS给元素行内设置了明确的百分比宽度，两次状态都是明确值，过渡就可以正常生效。

解决方案 #

只需要给.Container设置和你默认展示状态匹配的初始宽度即可，比如你默认对应Desktop的100%宽度，修改CSS代码：

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 新增默认宽度，和Desktop配置对齐即可 */
  width: 100%;
  /* Here is the transition */
  transition: 0.9s;
}

如果不想修改CSS，也可以在页面加载完成后主动调用一次resize方法初始化行内样式：

// 页面DOM加载完成后初始化默认状态
document.addEventListener('DOMContentLoaded', () => {
  resize('Desktop')
})

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