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

Question

我遇到了转换问题。

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

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

但是，因为我想在将 left 更改为 0px 之前对其应用过渡，所以我再次添加过渡 class，并给它一个带有 left: 0 的 class。当我在 Chrome 中执行此操作，然后将过渡应用到元素的 -860px 位置以及 0。所以不是我想要的。

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

这是一些示例代码。 class 与过渡：

.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; 在这一行之后 chrome 应该重新渲染元素；无需等待。或者 element.getBoundingClientRect(); 如果 chrome 想变得聪明 ;)

Understood. It's always a little scary to use something that is a side-effect rather than the intended purpose of an instruction. I guess I added both in case one of them gets optimized in a future version.

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

的性质的暗示

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

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

即使您不对该值执行任何操作，而只是要求触发整个机制。

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

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

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

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

Remove CSS transition, move the element, then re-apply it before moving it again

javascript

css

jquery

transitions

css-transitions