文章/答案/技术大牛

发布

社区首页 >问答首页 >带有几个子元素的CSS3动画整页容器会导致延迟

问带有几个子元素的CSS3动画整页容器会导致延迟
EN

Stack Overflow用户

提问于 2013-09-23 01:43:42

回答 2查看 1.4K关注 0票数 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)');

提前感谢！

编辑： 这里有把小提琴 (请记住，结果窗口在这里非常小，这给了我很好的平滑度。)但在全屏上，这有点不稳定)

EDIT2：修理坏了的小提琴！

css

css-transitions

javascript

html

回答 2

Stack Overflow用户

发布于 2013-09-23 20:02:03

在这种情况下，您可能会有一个滞后，可能是因为您正在移动带有所有图像的容器(而且这些图像很大)。浏览器需要计算每个改变位置的DOM元素的新位置，并在动画的所有步骤中移动它(这意味着重新绘制所有这些大图像)。

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

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

这里有一个只移动一个DOM元素的费赛德。

票数 0

Stack Overflow用户

发布于 2013-09-23 20:26:14

在这种情况下，动画的滞后往往是因为过载。也许你应该做些图像预加载。

就像这里显示的那样

和全手动这里

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18950677

复制

相似问题

问带有几个子元素的CSS3动画整页容器会导致延迟
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有几个子元素的CSS3动画整页容器会导致延迟EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有几个子元素的CSS3动画整页容器会导致延迟
EN