Question

每当我尝试为我的容器设置动画（如下所述）时，我经常遇到容器的一些滞后（如波涛汹涌的移动）。我做了一些重新搜索并尝试了一些东西，但还没有找到解决方案。 我做过的唯一一件事是，如果我删除除了一个之外的所有图片，一切顺利。

因此，通过消除所有图像，并在那里只有一个，解决了这个问题。但我需要所有的图像..功能实际上是幻灯片（图像的常规淡入淡出过渡）。

请查看我的设置，如果我在这里做任何不好的事情（目前只针对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)');

提前致谢！

编辑： Here's a fiddle btw（请记住，结果窗口非常小，这让我很顺利。但是在全屏幕中，它有点不稳定）

EDIT2 ：修复了破碎的小提琴！

Answer 1

在这种情况下，您可能会因为使用所有图像移动容器而导致延迟（这些图像很大）。浏览器需要为每个改变位置的DOM元素计算新的位置，并在动画的所有步骤中移动它（这意味着重绘所有这些大图像）。

如果只移动一个带有图像的DOM元素，则动画应该是平滑的：

$('.image').css('-webkit-transform', 'translate3d(0,500px,0)');

这里有一个fsfidde只能移动一个DOM元素。

Answer 2

由于过载，动画滞后通常是在这种情况下。也许你应该预先做一些图像。

就像显示here

一样

完整的手册here

具有多个子节点的CSS3动画整页容器导致滞后

2 个答案: