Question

我遇到过渡问题。

我在左侧属性上有一个转换。我想从左移动一个div：860px到-860px没有转换，然后通过转换将其移动到0px。

如果我删除了赋予元素转换的类，请应用一个给它-860px左边的类，这样做很好。没有过渡。

但是，由于我想在将其更改为0px之前对其应用转换，我再次添加转换类，并给它一个左边的类：0。当我在Chrome中执行此操作时，它会应用转换该元素在前往-860px位置以及0的路上。所以不是我想要的。

我想避免之间的延迟。但我不认为有一个事件会告诉我Chrome何时重新渲染元素为-860px。有什么想法吗？

这是一些示例代码。具有转换的类：

.div-transition {
    -webkit-transition:all 0.8s ease-in-out;
    -moz-transition:all 0.8s ease-in-out;
    -o-transition:all 0.8s ease-in-out;
    transition:all 0.8s ease-in-out;
}

$(".div-to-transition").removeClass('div-transition');
$(".div-to-transition").css('left', '-860px'); // So far so good, if I don't add the next two lines. 
$(".div-to-transition").addClass('div-transition'); 
$(".div-to-transition").css('left', '0'); // Now it applies a transition as we move left to -860px, AND from -860px to 0.

Answer 1

只需重复评论：element.scrollWidth;此行镀铬后应该重新渲染元素;没有任何等待。或者element.getBoundingClientRect();如果chrome试图变得聪明;）

解读。使用某种副作用而不是指令的预期目的总是有点可怕。我想我添加了两个，以防其中一个在未来版本中得到优化。

虽然它有点滥用，但副作用不那么纯粹，而且更多的是这些属性的性质和CSS的本质。

简短回答：您要求浏览器提供节点的属性，该属性受应用的样式的影响。现在，浏览器意识到它有待定的样式更改，需要进行评估，因为它们会对您要求的属性产生影响。通过CSS中的级联，几乎每种风格都可以以某种方式影响页面上的几乎每个节点。
例如，通过扩展当前节点，以下节点滑入下一行，现在也会影响它的样式，......并且不要忘记父节点及其后继节点。

因此，不是试图评估这个混乱，而是更容易应用所有挂起的样式（这基本上意味着重新渲染整个页面！）然后为您提供您所要求的价值。

即使您没有对此值执行任何操作，也只是要求触发此整个机制。

由于它现在又具有稳定状态，浏览器可以为您提供所需的所有属性而无需重新渲染，从而再次更改某个节点的样式（或者它的类）。
//只是说：scrollWidth不等于重新渲染整个页面。

<小时/> 我的第一个想法就是这样，chrome会以某种方式能够评估你没有改变任何影响维度的属性，从而为你提供答案而无需重新渲染整个页面，但如上所述：在CSS的混乱中，这几乎是不可能的。

因此，如果您希望将来安全，请仅使用getBoundingClientRect()，明确要求计算的位置和节点的计算尺寸。

删除CSS转换，移动元素，然后在再次移动之前重新应用它

1 个答案: