2

每当我尝试为我的容器设置动画时（如下所述），我经常会遇到容器的一些滞后（如不稳定的运动）。我进行了一些重新搜索并尝试了一些东西，但还没有找到解决方案。我发现的唯一一件事是，如果我删除除一个以外的所有图像，一切都会顺利进行。

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

请查看我的设置，如果我在这里做任何坏事，请注意我（目前仅适用于 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)');

提前致谢！

编辑： 这是一个小提琴btw（请记住，结果窗口在这里非常小，这给了我很好的平滑度。但在全屏时，它有点波涛汹涌）

EDIT2：修复了损坏的小提琴！

4

2 回答 2

0

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

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

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

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

于 2013-09-23T20:02:03.610 回答
0

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

就像这里显示的一样

和完整的手册在这里

于 2013-09-23T20:26:14.857 回答