永久CSS3翻译的OSX性能问题

时间:2015-01-08 13:48:40

标签: javascript macos css3 transform packery

我有一个整页的Packery,我想慢慢地,永久地向左移动。这一切都很好,但是在OSX(任何浏览器)上,动画都会偶尔出现一些急动。

由于缺少更好的解决方案,我每隔101毫秒从Packery容器的translateX中减去1。然后通过transform属性上的线性0.1s转换来平滑这一点。

在实践中;

的Javascript

var scrollPoint = 0;

moveWall = function(){
    scrollPoint -= 1;
    $("#packery").css({
        "-ms-transform": "translateX("+scrollPoint+"px)",
        "-webkit-transform": "translateX("+scrollPoint+"px)",
        "transform": "translateX("+scrollPoint+"px)"
    });
};

moveWall();
wallint = setInterval("moveWall()", 101);

CSS

#packery {
    width: 100%;
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transition: -webkit-transform 0.1s linear; 
    -moz-transition: -moz-transform 0.1s linear; 
    -o-transition: -o-transform 0.1s linear; 
    transition: transform 0.1s linear;
}

我有一种感觉,急动是由于过渡动画和间隔减法以某种方式相互干扰。但是,这似乎不是Windows的问题。

有没有办法解决这种混蛋?是否有更好/更聪明的方法来达到同样的效果?

0 个答案:

没有答案