1 回答

TA貢獻1784條經驗 獲得超7個贊
這是因為setTimeout(/**/, 0)不保證回調將在后續幀上執行。這可能(取決于瀏覽器實現和計算機速度)導致將樣式應用于與插入到 DOM 中的節點相同的框架。
理論上,您應該使用requestAnimationFrameinstead,這正是針對此類情況的。
但是,在您鏈接的小提琴中,只有當我將requestAnimationFrame難以察覺但仍然不受歡迎的加倍時它才有效......如果它是 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";
? ? })
? })
}
這是一個片段:
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>
添加回答
舉報