我注意到当我setTimeout从下面的代码中删除时，动画停止工作。有人可以向我解释引擎盖下发生了什么吗？
为什么有必要在setTimeout这里插入这个，即使时间值是0？在我看来，它应该立即执行，那为什么要插入setTimeout(cb,0)呢？
setTimeout(() => {
... //see below for code
}, 0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.message-ball {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.circle {
transition-property: width, height, margin-left, margin-top;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="go()">Click me</button>
<script>
function go() {
showCircle(150, 150, 100, div => {
div.classList.add('message-ball');
div.append("Hello, world!");
});
}
function showCircle(cx, cy, radius, callback) {
let div = document.createElement('div');
div.style.width = 0;
div.style.height = 0;
div.style.left = cx + 'px';
div.style.top = cy + 'px';
div.className = 'circle';
document.body.append(div);
setTimeout(() => {
div.style.width = radius * 2 + 'px';
div.style.height = radius * 2 + 'px';
div.addEventListener('transitionend', function handler() {
div.removeEventListener('transitionend', handler);
callback(div);
});
}, 0);
}
</script>
</body>
</html>
因为只有在更改属性时才会发生转换。如果你这样做
div.style.width = 0;
div style.width = "1000px";
这不会动画任何东西，因为属性被直接改变了。如果您推迟第二次更新，它将检测到更改并导致发生转换。，
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句