我已经创建了简单的演示，让我们开始吧......
应该说我们得用chrome和firefox来对比一下
演示1：
block.addEventListener("click", () => {
block.style.transform = "translateX(500px)";
block.style.transition = "";
block.style.transition = "transform 1s ease-in-out";
block.style.transform = "translateX(100px)";
});.main {
width: 100px;
height: 100px;
background: orange;
}<div id="block" class="main"></div>在这两种浏览器中，我们不会看到任何变化
演示2：
block.addEventListener("click", () => {
block.style.transform = "translateX(500px)";
block.style.transition = "";
requestAnimationFrame(() => {
block.style.transition = "transform 1s ease-in-out";
block.style.transform = "translateX(100px)";
});
});.main {
width: 100px;
height: 100px;
background: orange;
}<div id="block" class="main"></div>在 Chrome 中我们会看到动画，在 Firefox 中我们会看到另一件事。需要提及的是，Firefox 遵循了Jake Archibald in …
我有 2div秒，其中之一是通过display:none;. 两者在属性上都有相同的 css 过渡right。
如果我更改属性right通过jQuery和显示被隐藏的div，无论是使用$.css('display','none')或$.show()或$.toggle()等，隐藏DIV的结束位置瞬间画
$('button').on('click',function(){
$('.b').show();
$('.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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>A
</div>
<div class='b'>B
</div>
<button>Launch</button>如果我使用$.animate()它会起作用。但我的问题是；这是错误还是正常行为？
在我的问题中,DOM重绘方法是那些修改DOM并导致浏览器重绘页面的方法.例如:
const newChildNode = /*...*/;
document.body.appendChild(newChildNode);
const newHeight = document.body.scrollHeight;
这段代码在正常情况下工作正常,但我不太确定它在高压条件下的表现如何,比如有很多请求重绘页面.我可以假设在document.body.scrollHeight执行时,newChildNode屏幕上已经可见吗？