这里是一个demo

假设有元素

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

有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
    })
}