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

【问题标题】：Why css transition happens when CSS properties are not changed?为什么 CSS 属性未更改时会发生 css 转换？
【发布时间】：2015-05-25 05:09:12
【问题描述】：

首先我更改“左”css 属性，然后添加转换属性以查找“左”更改并执行动画。有人可以解释一下为什么会这样吗？我认为它应该改变元素的位置然后寻找过渡，但它没有。

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/

【问题讨论】：

标签： html css css-transitions css-animations

【解决方案1】：

重绘和动画操作会延迟到当前执行的 JS 线程完成，这样浏览器就可以检查所有已更改的内容并只对这些更改进行一次操作，而不是试图跟上所做的每个更改。

因此，您对style.transition 和style.left 的更改似乎是同时连接和看到的。

如果您想断开它们的连接，您可以通过在设置 .left 属性之后但在设置之前请求触发重新布局的几个有趣属性之一（例如 .offsetHeight）来强制重新布局.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 值会立即生效，并且它不是动画的。

【讨论】：