Laggy jQuery的

我有一個使用CSS3過渡Laggy jQuery的

jQuery的幻燈片從100％的absoluted空div爲0％，一個簡單的頁面onload事件影響：

$(window).on('load', function() { 
    $("#curtain").css('width', '0'); 
});

CSS：

#curtain { 
position: absolute; 
z-index: 10; 
width: 100%; 
height: 100%; 
transition: 1s; 
float: left; 
}

但是，經過測試，動畫顯然是滯後的。由於它的原因，它會在低幀率下錯開，最終加速噸。我嘗試將窗簾動畫綁定到一個按鈕，並且它運行得非常順利，從而導致我發現window onload是問題的結論。有什麼辦法可以解決這個問題嗎？

來源

2017-08-02 user7548189

你是否已經加入了輕微的延遲過渡的開始或緩解的屬性嘗試？ –

我已經嘗試了這兩種。增加一個延遲只會阻止大約+ 1.5s及以上的延遲（我寧願不使用如此長的延遲），並且緩解屬性似乎不會幫助延遲。 – user7548189

您是否嘗試過使用關鍵幀並使用「動畫」代替？此外，[這個答案]（https://stackoverflow.com/questions/6805482/css3-transition-animation-on-load）有很多不同的選項可供閱讀。它沒有解決laggy，但更多的頁面加載啓動動畫 –

你可以只取出負載事件類.notloaded和手藝一些CSS，如：

.curtain {transition:.2s} 
.curtain.notloaded {transform: translate(-100%,0)}

看起來這將是一個類似的效果。問題是 - 我相信 - 瀏覽器必須重新計算寬度發生變化的每一幀的所有子元素。

PS：爲什麼漂浮在絕對定位的元素上？ :)

來源

2017-08-02 02:19:39

float:left絕對定位元素是沒用的。有沒有效果
使用jQuery的東西，可以做很容易與CSS動畫是不是好的做法和你的加載時間可能會拖慢

，你可以很容易地做到這一點

#curtain { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    animation-name: widthAnim; 
 
    animation-delay: 0.5s; 
 
    animation-duration: 0.8s; 
 
    animation-fill-mode: forwards; 
 
    animation-timing-function: ease-out; 
 
} 
 

 
@keyframes widthAnim { 
 
    0% { 
 
    width: 200px 
 
    } 
 
    100% { 
 
    width: 0; 
 
    } 
 
}

<div id="curtain"> 
 

 
</div>

如果您不需要將jQuery用於其他目的，我建議您不要加載它並使用javascript。原生內聯樣式是將樣式更改爲元素的最快方法。看到這裏>css width inline

所以，你可以做這樣的事情

window.onload = function() { 
 
curtain = document.getElementById('curtain'); 
 
curtain.style.width = 0 
 
};

#curtain { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    transition:1s; 
 
}

<div id="curtain"> 
 

 
</div>

來源

2017-08-02 07:10:32

回答

相關問題