スマートフォンで私のシンプルなCSSトランジションアニメーションがぎこちないのはなぜですか？

being advisedの後にjQueryアニメーションからCSSアニメーションに切り替えてモバイルメニューアニメーションをよりスムーズにするために、スマートフォンに表示されるモバイルメニューのアニメーションがジャーキーであり、改善するために何をすべきかわかりません。スマートフォンで私のシンプルなCSSトランジションアニメーションがぎこちないのはなぜですか？

JS：

$('.header__menu_icon').click(function() { 
    var allClasses = 'right_0 right_280 right_minus_280'; 
    $('.mobile_menu, .wrap').removeClass(allClasses); 
    if ($('.wrap').css('right') == '0px') { 
    $('.wrap').addClass('right_280'); 
    } 
    else { 
    $('.wrap').addClass('right_0'); 
    } 
});

CSS：

.mobile_menu { 
    width: 280px; 
    position: absolute; 
    right: -280px; 
} 
.right_0 { 
    right: 0 !important; 
} 
.right_280 { 
    right: 280px !important; 
} 
.right_minus_280 { 
    right: -280px !important; 
} 
body, 
.wrap, 
.mobile_menu { 
    transition: all 0.2s ease-in-out; 
}

HTML：

<body> 
<div class='wrap'> 
    <div class='header'> 
    <div class='mobile_menu'> 
     ... 
    </div> 
    </div> 
</div> 
</body>

EDIT：以下@ GaijinJimの回答に基づいて新しいコード。

JS：

$('.header__menu_icon').toggle(function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_opening'); 
}, function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_closing'); 
});

CSS：

@keyframes mobile_menu_opening { 
    0% { 
    transform: translateX(0px); 
    } 
    100% { 
    transform: translateX(-280px); 
    } 
} 
@keyframes mobile_menu_closing { 
    0% { 
    transform: translateX(-280px); 
    } 
    100% { 
    transform: translateX(0px); 
    } 
} 
.mobile_menu_opening { 
    animation-name: mobile_menu_opening; 
    animation-duration: 2s; 
} 
.mobile_menu_closing { 
    animation-name: mobile_menu_closing; 
    animation-duration: 1s; 
} 
.wrap { 
    position: relative; 
}

出典

2016-07-04 drake035

すべてのトランジションではなく、特定のプロパティを使用してみてください。 – Musa

[こちら]（https://blog.alexmaccaw.com/css-transitions）について読むことができるCSS Transformsを使用することをお勧めします。これはあなたの携帯に大きなパフォーマンス上の影響を与えます。 – GaijinJim

これに関するすべてのニュース？ – GaijinJim

それが原因あなたがトランスフォームを使用していないという事実のために多くのパフォーマンスの問題のように聞こえます。

は要素を移動するために）それは（翻訳使用していることを一般的な、一般的なアドバイスになってきたクリスCoyier

によってA Tale of Animation Performanceで述べたの左右/トップ/ボトム/を使用するよりも優れた性能を有します。

[...]ポールはChromeチームに別のポールに話を聞いたことがあることを合意ポール・ルイス、「設計-Y運動のために）（翻訳を使用してよりスマートに。」しかし、に行くと、これ以上のフレームレートがあると言います。で）（翻訳し、あなたはまた、All you need to know about CSS Transitionsについては、この偉大な記事を読むことができ、通常はよりスムーズなアニメーション

につながる画素間をぼかすの一種であるサブピクセルアニメーション取得：

をハードウェアアクセラレータ
左のなどの特定のプロパティを遷移させると、ブラウザはスタイルごとにスタイルを再計算します。これはかなり高価で、特に画面上に多くの要素がある場合には、不要な再塗装（）が発生する可能性があります。これは携帯電話のような強力でないデバイスで特に顕著ですです。

この解決策は、CSS 変換を使用して、レンダリングをGPUにオフロードすることです。簡単に言えば、遷移中に要素を画像に変え、どのようなスタイルの再計算も避けて、大幅にがパフォーマンスを向上させます。

だからあなたの場合には、私は単純なアニメーションのように、すべての敬意での混乱のビットですあなたの全クラスに変更になります。そして、あなたはボタンクラスにこのアニメーションを割り当てることができます

@keyframes buttonInOutAnimation{ 
    0%{transform:translateX(-280px);} 
    50%{transform:translateX(280px);} 
    100%{transform:translateX(-280px);} 
}

を以下のようなので：あなたはすでに行ってきたように

.YourClassToAnimate{ 
    animation: buttonInOutAnimation 1s ease-in-out 0s 1; 
}

は、その後、あなたはjQueryを使って、このクラスを割り当てることができます。

最後のもの：アニメーションの最後にアニメーションの状態を固定するには、塗りつぶしモードを追加する必要があります。

-webkit-animation-fill-mode: forwards;

forwards最後のフレームの状態でアニメーションを残します。
backwards開始時にアニメーションを残します。

出典

2016-07-04 18:36:09 GaijinJim

詳細な回答をいただきありがとうございます！しかし、問題があります： ".wrap"コンテナが280pxを左に移動すると、すぐに最初の位置にジャンプします。なぜ、これを防ぐ方法は？ – drake035

残念ですが、アニメーションの最後にアニメーションの状態をフリーズするために、塗りつぶしモードを追加する必要があります。 '-webkit-アニメーションフィルモード：転送;' 'forwards'が最後のフレームの状態でアニメーションを残し ' backwards'が開始 – GaijinJim

おかげ@gaijinJimでアニメーションを残し、今完璧に動作します！私はあなたの答えを受け入れた。 – drake035

スマートフォンで私のシンプルなCSSトランジションアニメーションがぎこちないのはなぜですか？

答えて

関連する問題