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转换？

1 个答案: