CSS动画在js忙时卡住
CSS动画在js忙时卡住
提问于 2016-07-05 14:56:02
我有一个css动画，我有一些js代码在做一些事情，假设循环遍历i：
for (var i = 0; i < 10000; i++) {
console.log(i);
}这段代码阻止了我的动画运行。有什么解决方案吗？不使用gif
html + css代码
<div class="progress">
<span></span>
</div>
.progress {
width: 500px;
max-width: 500px;
height: 50px;
overflow: hidden;
> span {
display: block;
position: relative;
height: 100%;
width: 200%;
transform: translateX(-50%);
overflow: hidden;
background-color: #4a4a4a;
&:after, >span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(#fff, .2) 25%,
transparent 25%,
transparent 50%,
rgba(#fff, .2) 50%,
rgba(#fff, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 30px 30px;
overflow: hidden;
-webkit-animation: move 4s linear infinite;
-moz-animation: move 4s linear infinite;
animation: move 4s linear infinite;
}
}
}
@keyframes move {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(50%);
}
}codepen - css animation
回答 2
Stack Overflow用户
发布于 2016-07-05 15:15:30
不，这不可能。或者至少在不重新格式化代码的情况下不会。动画被卡住的原因是因为渲染页面就像任何其他函数一样。如果你把JS堆栈和循环放在一起，浏览器就永远不会有时间重新渲染你的屏幕，从而渲染你的动画。
潜在解决方案：
您可以使用setInterval代替时间为0的循环。这样做的目的是将每个函数推入回调队列，并在每次清除堆栈时执行。这为动画提供了渲染的时间。你会想要这样的东西：
var counter = 0;
var inter = setInterval(function(){
if(++counter >= 1000){
return clearInterval(inter);
}
console.log(counter);
},0);网络工作者解决方案
您也可以尝试使用web workers。Web Workers API允许您在单独的线程上运行JS进程。这将要求您将JS存储在外部脚本中。
Stack Overflow用户
发布于 2021-10-11 11:50:35
更新2021 -使用异步功能或承诺释放浏览器的css动画
async function busyWork(){
for (var i = 0; i < 10000; i++) {
console.log(i);
}
}或者是一个承诺
new Promise(resolve=>{
for (var i = 0; i < 10000; i++) {
console.log(i);
}
resolve()
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38197015
复制相关文章
相似问题
腾讯云开发者
