为什么在CSS属性没有改变时会发生css转换？

首先我更改"left"css属性,然后添加转换属性,查找"left"更改并执行动画.有人可以解释我为什么会这样吗？我认为它应该改变元素的位置然后寻找过渡,但事实并非如此.

var button = document.getElementById('slide');
button.Onclick= function() {
    var view = document.getElementById('view');
    view.style.left = '-100px';
    // Why does transition happen? O_o
    view.style.transition = 'left 500ms ease-out';
}

http://jsfiddle.net/martyn0FF/20kvbvua/

重绘和动画操作将推迟到当前正在执行的JS线程完成,以便浏览器可以检查已更改的所有内容并仅对这些更改执行一次操作,而不是尝试跟上所做的每个更改.

因此,您似乎可以同时更改style.transition并style.left连接和查看.

如果要断开它们,可以通过请求.offsetHeight在设置.left属性后触发重新布局的几个有趣属性(例如)中的一个来强制重新布局,但是在设置.style.transition属性之前:

var button = document.getElementById('slide');
button.Onclick= function() {
    var view = document.getElementById('view');
    view.style.left = '-100px';
    // trigger layout by requestion offsetHeight
    var x = view.offsetHeight;
    view.style.transition = 'left 500ms ease-out';
}

请注意,在此jsFiddle中使用此代码时,新left值立即发生,并且不会设置动画.