Question

我有一个简单的页面上传效果，使用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;
}

然而，经过测试，动画明显滞后。它会以低帧速率错开并最终加速吨数因为它。我尝试将窗帘动画绑定到一个按钮，它工作得非常顺利，这让我得出窗口加载是问题的结论。有什么方法可以解决这个问题吗？

Answer 1

您可以在加载事件中删除类.notloaded并制作一些css，如：

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

似乎它会产生类似的效果。问题是 - 我相信 - 浏览器必须在宽度变化的每一帧重新计算所有子元素。

PS：为什么漂浮在绝对定位的元素上？：）

Answer 2

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。原生内联样式是将样式更改为元素的最快方法。看到这里＆gt; 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>

在窗口onload下的Laggy jQuery

2 个答案: