关于transition的一点疑惑

Question

这里是一个demo假设有元素有css.change{transition:all1s;}用js修改其样式window.onload=function(){vardemo=document.querySelector('.demo');demo.style.left='200px';//1demo.style.background='pink';//2demo.classList.add('change');//3}为什么left，background的值是渐变的？明明是先改变值，后添加transition属性的如果是用jquery，在addClass前添加一个show方法，就可修复此bug，不过这又是为什么？window.onload=function(){//$('.demo').css({'left':'200px','background':'pink'}).addClass('change');//和上面一样会渐变$('.demo').css({'left':'200px','background':'pink'}).show().addClass('change');//不会简便}解决方法，如此便好window.onload=function(){vardemo=document.querySelector('.demo');demo.style.left='200px';//1demo.style.background='pink';//2setTimeout(function(){demo.classList.add('change');//3})}

Answer 1

这个和浏览器渲染优化有关，你去执行js代码，等到下一帧的时候才回去真正做一次绘制，解决这个你可以在指定完style之后，强制一次reflow，例如可以ele.offsetWidth=ele.offsetWidth
                            

Answer 2

有可能跟js执行速度和你的.change{transition:all1s;}这个设置的时间有关。加上show的话有一个show的时间过程。