0

ゆっくりと永続的に左に移動したいフルページの Packery があります。それはすべて問題なくダンディですが、OSX (任意のブラウザー) では、アニメーションに時折ぎくしゃくすることがあります.

より良い解決策がないためtranslateX、Packery コンテナーの から 101 ミリ秒ごとに 1 を引いています。これは、プロパティの線形 0.1 秒遷移によって平滑化されtransformます。

実際には;

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