关于transition的一点疑惑

Question

这里是一个demo

假设有元素

<div class="demo" style="position:absolute;left:0;height:100px;width:100px;background:blue;"></div>

有css

.change{transition:all 1s;}    

用js修改其样式

window.onload = function(){
    var demo =document.querySelector('.demo');
    demo.style.left = '200px' ; // 1
    demo.style.background = 'pink' ; // 2
    demo.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(){
    var demo =document.querySelector('.demo');
    demo.style.left = '200px' ; // 1
    demo.style.background = 'pink' ; // 2
    setTimeout(function(){
        demo.classList.add('change') ; // 3
    })
}

Answer 1

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

Answer 2

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