页面加载时transition属性为何影响元素？如何解决加载延迟问题？

嘿，我完全懂你遇到的这个坑！本地用VS Code运行时，transition居然把初始的背景色和位置变化也给过渡了，在线编辑器却没事对吧？这其实是浏览器本地渲染时机和在线环境的差异导致的——本地加载时，浏览器可能把元素初始样式的应用也当成了“属性变化”，触发了transition的延迟效果。

给你几个靠谱的解决方法：

方法1：页面加载后再添加过渡类 #

这是最稳妥的方案，把transition从元素的默认样式里抽出来，用类来控制，等页面完全加载后再给元素加上这个类：

div {
  width: 100px;
  height: 100px;
  background-color: #90f;
  /* 初始不设置过渡 */
}
.transition-active {
  transition-duration: 1s;
  /* 或者更精准地指定过渡属性：transition: background-color 1s, margin 1s; */
}

// 等页面所有资源加载完成后再添加过渡类
window.addEventListener('load', () => {
  document.querySelector('div').classList.add('transition-active');
});

这样初始的背景色和位置会立刻渲染，之后的属性变化才会触发1秒的过渡效果。

方法2：精准指定过渡属性 #

如果你不想加JS，可以试试明确指定transition作用的属性，而不是让它作用于所有属性（默认是all）。这样初始加载时的默认属性值不会被判定为“变化”，也就不会触发过渡：

div {
  width: 100px;
  height: 100px;
  background-color: #90f;
  /* 只针对需要过渡的属性设置 */
  transition: background-color 1s, margin 1s;
}

不过这个方法在某些浏览器的本地环境下可能还是会有小概率问题，不如方法1稳定。

方法3：强制浏览器重绘（hack技巧，不推荐） #

如果上面两种方法都不行，可以试试这个小技巧，通过瞬间修改一个无关属性强制浏览器立刻渲染初始状态：

div {
  width: 100px;
  height: 100px;
  background-color: #90f;
  transition-duration: 1s;
}

window.addEventListener('DOMContentLoaded', () => {
  const div = document.querySelector('div');
  // 强制重绘：读取offsetHeight会触发浏览器立即渲染当前样式
  div.offsetHeight;
});

这个方法原理是触发浏览器的重绘机制，让初始样式先渲染出来，再应用transition。但属于hack手段，尽量优先用前两种方法。

内容的提问来源于stack exchange，提问作者Abd al rahman shebani