带有几个子元素的CSS3动画整页容器会导致延迟
提问于 2013-09-22 17:43:42
每当我试图动画我的容器(下面描述)，我经常遇到一些滞后(如波涛汹涌的运动)容器。我做了一些重新搜索，尝试了一些东西，但还没有找到解决方案。我唯一发现的是，如果我删除所有的图像，除了一个之外，所有的东西都能正常工作。
因此，通过消除所有的图像，并有一个在那里，解决了问题。但我需要所有的图像..。功能实际上是一个幻灯片(图像的定期淡出转换)。
请查看我的设置，如果我在这里做任何坏事(目前只针对WebKit)，请注意：
<div id="container">
<div id="inner">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
[...]
</div>
</div>使用CSS：
#container {
width:100%;
height:100%
position:absolute;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 800ms linear;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d; /* *should* improve performance? */
}
#inner {
position:relative;
width:100%;
height:100%;
}
.image {
position:absolute;
left:0;
top:0;
background-image:[something];
width:100%;
height:100%;
background-size:cover;
}然后，我在代码中做了几个这样的操作，让容器四处移动。
$('#container').css('-webkit-transform', 'translate3d(0,500px,0)');提前感谢！
编辑： 这里有把小提琴 (请记住，结果窗口在这里非常小，这给了我很好的平滑度。)但在全屏上，这有点不稳定)
EDIT2：修理坏了的小提琴！
回答 2
Stack Overflow用户
发布于 2013-09-23 12:02:03
在这种情况下，您可能会有一个滞后，可能是因为您正在移动带有所有图像的容器(而且这些图像很大)。浏览器需要计算每个改变位置的DOM元素的新位置，并在动画的所有步骤中移动它(这意味着重新绘制所有这些大图像)。
如果只移动一个带有图像的DOM元素，则动画应该是平滑的：
$('.image').css('-webkit-transform', 'translate3d(0,500px,0)');这里有一个只移动一个DOM元素的费赛德。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18950677
复制相关文章
腾讯云开发者
