小编典典
要清楚地了解情况,您需要了解CSSOM和DOM之间的关系。
在先前的Q / A中,我对 重绘 过程的工作方式进行了一些开发。 基本上,有三个步骤,DOM操作,重排和绘制。
第一个( DOM操作 )只是修改js对象,并且都是同步的。
第二个( reflow ,又称 layout )是我们感兴趣的一个,并且稍微复杂一些,因为只有某些DOM方法和绘画操作需要它。它包括更新所有CSS规则并重新计算页面上每个元素的所有计算样式。
作为一项相当复杂的操作,浏览器将尝试尽可能少地执行此操作。
第三次( 绘画 )最多每秒最多只能完成60次(仅在需要时)。
CSS过渡通过从一种状态过渡到另一种状态来工作。为此,他们查看元素的 最后一个计算值 以创建初始状态。
由于浏览器仅在需要时才重新计算所计算的样式,因此在过渡开始时,您应用的所有DOM操作均无效。
因此,在您的第一种情况下,当计算过渡的初始状态时,
.b { computedStyle: {display: none} }
…就是这样。
因为,是的,这display: none就是CSSOM的强大功能。如果元素具有display: none,则不需要绘制它,则它不存在。
因此,我什至不确定转换算法是否会启动,但是即使这样,初始状态对于 任何可 转换值也将是无效的,因为所有计算出的值都为null。
.a从一开始就可见您的元素没有此问题,可以进行过渡。
如果你能使其与延迟(诱导工作$.animate),这是因为DOM MANIP“这确实改变之间的display财产,这种延迟DOM
MANIP的执行”,做触发转换,浏览器确实触发一个 回流 (例如,因为屏幕之间出现了 垂直 同步,并且启动了 绘画 操作)。
现在,这不是问题的一部分,但是由于我们确实了解发生了什么,因此我们也 可以更好地控制它 。
实际上,某些DOM方法确实需要具有最新的计算值。举例来说Element.getBoundingClientRect,或element.offsetHeight或getComputedStyle(element).height等等。所有这些需要
整个页面 已经更新,以便拳击正确做出的计算值(例如一个元素可以有一个保证金推或多或少等)。
这意味着我们不必在的时候,浏览器将触发这个未知的 回流 ,我们可以迫使它这样做时,我们想要的。
但是请记住, 页面上的所有元素都 需要更新,这不是一个小操作,如果浏览器宽容地这样做,这是有充分理由的。
因此,最好偶尔使用它,每帧最多使用一次。
幸运的是,WebAPI使我们能够在绘画操作发生之前钩住一些js代码:requestAnimationFrame。
因此,最好的方法是在此预绘画回调中仅强制执行一次重排,并从该回调中调用需要更新值的所有内容。
$('button').on('click',function(){
$('.b').show(); // apply display:block synchronously
requestAnimationFrame(() => { // wait just before the next paint
document.body.offsetHeight; // force a reflow
// trigger the transitions
$('.b').css('right','80%');
$('.a').css('right','80%');
});
})
body {
width:800px;
height:800px;
}
div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}
.a {
display:block;
top:60px;
}
Launch
但老实说,设置起来并不总是那么容易,因此,如果您确定某些东西会偶尔被触发,那么您可能会很懒惰并同步执行所有操作:
$('button').on('click',function(){
$('.b').show(); // apply display:block
document.body.offsetHeight; // force a reflow
// trigger the transitions
$('.b').css('right','80%');
$('.a').css('right','80%');
})
body {
width:800px;
height:800px;
}
div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}
.a {
display:block;
top:60px;
}
Launch
2020-05-16