0

私は現在、アニメーションに Zepto.js を使用して Backbone.js でモバイル アプリに取り組んでおり、ページ遷移中に目立つ白いちらつきがあり、視覚的に非常に不快です。私はそれを理解できないようです、誰もがなぜこれが起こっているのか考えていますか?

私のアニメーションコードは次のとおりです。

var $old = $('.page').not(this.el);

        //This fix was hard-won, just doing .css(property, '') doesn't work!
        $old.get(0).style["margin-left"] = ""
        $old.get(0).style["-webkit-transform"] = ""

        this.$el.appendTo('body').hide();
        this.$el.show().css({"margin-left": 320 * direction_coefficient});
        var that=this;
        that.$el.anim({translateX: -320 * direction_coefficient +'px'}, 0.3, 'ease-out');
        $old.anim({translateX: -320 * direction_coefficient + 'px'}, 0.3, 'ease-out', function() {
            $old.remove();
            //$('.page').css({"position": "static"});
        });
4

1 に答える 1

2

ちらつきを防ぐために、アニメーション要素（ページビュー？）の背面の可視性を非表示に設定します

-webkit-backface-visibility: hidden;

これが機能しない場合は、ボディまたはアニメーション要素で使用してみてください

-webkit-transform:translate3d(0,0,0);

これにより、ボディまたは要素が、アニメーション用にラスタライズされる GPU アクセラレーション レイヤーに変換されなくなります。これは、通常の要素がアニメーション レイヤーに変換されるときにちらつきが発生する可能性がある場所です。

于 2012-10-18T10:39:15.127 に答える