1 回答

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
這是因?yàn)閟etTimeout(/**/, 0)不保證回調(diào)將在后續(xù)幀上執(zhí)行。這可能(取決于瀏覽器實(shí)現(xiàn)和計(jì)算機(jī)速度)導(dǎo)致將樣式應(yīng)用于與插入到 DOM 中的節(jié)點(diǎn)相同的框架。
理論上,您應(yīng)該使用requestAnimationFrameinstead,這正是針對(duì)此類情況的。
但是,在您鏈接的小提琴中,只有當(dāng)我將requestAnimationFrame難以察覺但仍然不受歡迎的加倍時(shí)它才有效......如果它是 JSFiddle 的僥幸或什么......
function move(color){
? let clone=document.getElementById("test").cloneNode(true);
? clone.id=color;
? clone.style.display="block";
? clone.style.backgroundColor=color;
? document.getElementById("main").prepend(clone);
? requestAnimationFrame(() => {
? ? requestAnimationFrame(() => {
? ? ? ? clone.style.left="500px";
? ? })
? })
}
這是一個(gè)片段:
function move(color) {
? let clone = document.getElementById("test").cloneNode(true);
? clone.id = color;
? clone.style.display = "block";
? clone.style.backgroundColor = color;
? document.getElementById("main").prepend(clone);
? requestAnimationFrame(() => {
? ? requestAnimationFrame(() => {
? ? ? clone.style.left = "500px";
? ? })
? })
}
setTimeout(() => move("red"), 500);
setTimeout(() => move("green"), 750);
#main {
? display: block;
? width: 100vw;
? height: 100vh;
? background-color: blue;
}
.test {
? position: absolute;
? display: none;
? width: 100px;
? height: 100px;
? background-color: red;
? transition: left 1s ease;
? transform: scale(1);
? left: 0px;
}
<div id="main"></div>
<div id="test" class="test"></div>
添加回答
舉報(bào)