为什么在 CSS 属性未更改时发生 css 转换？

Question

首先我更改了 "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/

Answer 1

重绘和动画操作被推迟到当前执行的 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';
}

请注意 this jsFiddle 中使用此代码，新的 left 值会立即发生并且不是动画的。

为什么在 CSS 属性未更改时发生 css 转换？

Why css transition happens when CSS properties are not changed?

html

css

css-transitions

css-animations