移除 CSS 过渡，移动元素，然后在再次移动之前重新应用它答案

【问题标题】：Remove CSS transition, move the element, then re-apply it before moving it again移除 CSS 过渡，移动元素，然后在再次移动之前重新应用它
【发布时间】：2016-11-27 22:39:46
【问题描述】：

我遇到了过渡问题。

我在 left 属性上有一个过渡。我想从左边移动一个 div：860px 到 -860px 没有过渡，然后将它移动到 0px 有过渡。

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

但是，由于我想在将 left 更改为 0px 之前对其应用过渡，所以我再次添加过渡类，并给它一个 left: 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.

【问题讨论】：

分享一些代码...
如果你仍然需要 jQuery，我想我只需使用 style.left 设置 left 属性，然后添加一个类，这样你就不需要尝试检测 if/when该元素位于-860px。如果您想尝试但遇到困难，请添加一些代码。
@eskimo - 我添加了一些示例代码。
element.scrollWidth; 在这一行之后 chrome 应该重新渲染了元素；无需等待。或者 element.getBoundingClientRect(); 如果 chrome 试图变得聪明;)
@Thomas - 谢谢。我尝试了 $element[0].scrollWidth ，它似乎正在工作。尚未尝试 FF / IE11。

标签： javascript jquery css css-transitions transitions

【解决方案1】：

只是重复评论：element.scrollWidth; 在这一行之后 chrome 应该重新渲染了元素；无需等待。或者 element.getBoundingClientRect(); 如果 chrome 试图变得聪明的话;)

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

虽然有点滥用，但它不是纯粹的副作用，而是这些属性的性质和 CSS 的性质的含义。

简短的回答很长：您正在向浏览器询问节点的属性，该属性受应用样式的影响。现在浏览器意识到它有待评估的样式更改是否对您要求的属性有影响。通过 CSS 中的级联，几乎每种样式都可以以某种方式影响页面上的几乎每个节点。
例如，通过将当前节点展开到下一个节点滑入下一行的程度，这现在也会影响它的样式，......并且不要忘记父节点及其后继节点。

因此，与其尝试评估混乱，不如应用所有待处理的样式（这基本上意味着重新渲染整个页面！）然后为您提供您所要求的值。

即使你没有对这个值做任何事情，而只是要求触发整个机制。

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

我的第一个想法很简单，chrome 也许以某种方式能够评估您没有更改任何影响节点尺寸的属性，因此无需重新渲染即可为您提供答案整个页面，但如前所述：在 CSS 的混乱中，这几乎是不可能的。

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

【讨论】：