我有一个整页的 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 的问题。
有没有办法解决抽筋问题?是否有更好/更智能的方法来实现相同的效果?