我有一个简单的页面上传效果,使用CSS3过渡将绝对的空div从100%滑动到0%
的jQuery :
$(window).on('load', function() {
$("#curtain").css('width', '0');
});
CSS :
#curtain {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
transition: 1s;
float: left;
}
然而,经过测试,动画明显滞后。它会以低帧速率错开并最终加速吨数因为它。我尝试将窗帘动画绑定到一个按钮,它工作得非常顺利,这让我得出窗口加载是问题的结论。有什么方法可以解决这个问题吗?
答案 0 :(得分:0)
您可以在加载事件中删除类.notloaded
并制作一些css,如:
.curtain {transition:.2s}
.curtain.notloaded {transform: translate(-100%,0)}
似乎它会产生类似的效果。 问题是 - 我相信 - 浏览器必须在宽度变化的每一帧重新计算所有子元素。
PS:为什么漂浮在绝对定位的元素上? :)
答案 1 :(得分:0)
float:left
是无用的。没有效果你可以很容易地做到这一点
#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>
所以你可以做这样的事情
window.onload = function() {
curtain = document.getElementById('curtain');
curtain.style.width = 0
};
#curtain {
width: 200px;
height: 200px;
background: red;
transition:1s;
}
<div id="curtain">
</div>