为什么css转换发生在css属性未更改的情况下

Question

首先我更改"left"css属性，然后添加transition属性，该属性查找"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/

Answer 1

Redraw和动画操作被推迟到当前执行的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值立即发生，并且没有设置动画。