CSS動畫忙

Question

我有一個CSS動畫和我的js代碼，做一些事情，讓說遍歷我：

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

Answer 1

不，這是不可能的。或者至少不是沒有重新格式化您的代碼。動畫卡住的原因是因爲渲染頁面與其他函數一樣。如果你用你的循環嵌套JS堆棧，那麼瀏覽器就不會重新渲染你的屏幕，從而渲染你的動畫。

潛在的解決方案：

你可以用0的時候這樣做是推動各功能爲回調隊列使用的setInterval，而不是一個環，它的每個執行堆棧明確的時間。這允許動畫呈現時間。你會想是這樣的：

var counter = 0; 

var inter = setInterval(function(){ 
if(++counter >= 1000){ 
    return clearInterval(inter); 
} 
console.log(counter); 
},0); 

網絡工作者解決方案

您還可以使用網絡工作者嘗試。 Web Workers API允許您在單獨的線程上運行JS進程。這將需要您將JS存儲在外部腳本中。