JS去除过渡效果，设置width:1000px;然后加过渡效果，为什么width是以过渡变化？

Question

1. JS给div的style对象设置transition：none;width:1000px; 然后在设置transition：all .4s; 为什么在网页中div的width是以过渡效果显示的？ 而不是直接一下变为1000px?

2. 和event loop有关吗？

3. 是不是因为浏览器在解析的时候会先收集所有style属性，然后一起去设置？

4. 和浏览器渲染有关吗？

5. 

Answer 1

没错，和浏览器渲染有关，你这么写，就相当于 transition = 'none' 是无效的，直接被后面的覆盖了。

如果要达到你的目的，需要让浏览器强行重绘。

setTimeout(() => {
  div.style.transition  = 'none';
  div.style.width = '500px';
  div.offsetWidth;//重绘
  div.style.transition = 'all .4s';
});