0

我有一个整页的 Packery，我想缓慢而永久地向左移动。一切都很好，很漂亮，但是在 OSX（任何浏览器）上，动画偶尔会有一些抖动。

由于缺乏更好的解决方案，我translateX每 101 毫秒从 Packery 容器中减去 1。transform然后通过属性上的线性 0.1 秒过渡来平滑它。

在实践中;

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 的问题。

有没有办法解决抽筋问题？是否有更好/更智能的方法来实现相同的效果？

4

0 回答 0