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

Laggy jQuery的

回答

相关问题