cssアニメーションとjquery .load（）モバイルデバイスの吃音

Question

まず、私の悪い英語を申し訳ありません。 divに新しいCSSクラスを追加してボタンをクリックした場合にトリガーするCSSストロークダッシュアリーアニメーションがあります。さらに、jquery​​を使用してテキストファイルがロードされます。悲しいことに、私の携帯機器では、アニメーションが吃音します。私は試しました

transform: translateZ(0); 
-webkit-transform: translateZ(0); 

ハックがまだ吃音です。また、.attr()を​​のコールバック位置に配置して、ロード後にトリガーされるようにしました。しかし、それはまだ吃音。

私の質問：モバイルデバイス上で吃音ませんjqueryの​​ための代替はありますか？あるいは他の最適化はありますか？これまで

マイコード：

<div> 
    <svg> 
     <path id="path1" class="path_before" d=... /> 
    </svg> 
</div> 
<div id="container> 
</div> 

CSS：

.path_before 
{ 
    stroke: none; 
    fill: none; 
} 

.path_after 
{ 
    stroke: #6699ff; 
    stroke-width: 4px; 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 4s linear forwards; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
} 

jqueryの：

var values = "0;1;2;3;4;5;6".split(";"), 
    currentIndex = 0; 

function next() { 
    $("#container").load("content/content.txt #schritt" + values[currentIndex], function(){  
     $("#path" + values[currentIndex]).attr("class", "path_after"); 
     currentIndex = currentIndex + 1 
    }); 
}; 

$(document).ready(function(){ 
    $("#next").click(next); 
}); 

Answer 1

が必要になりますが、ページの再描画を引き起こしCSSを追加しないようにしたいです。ストロークを追加すると、ある程度の大きさになります。ページを移動するには何も表示されない場合であっても、それが再計算されなければなりません。

ストロークを追加/削除する代わりに、ストロークを表示/非表示にするだけです。ストロークを背景色に合わせると効果があります。

.path 
{ 
     stroke: #6699ff; 
     stroke-width: 4px; 
     stroke-dasharray: 1000; 
     stroke-dashoffset: 1000; 
     animation: dash 4s linear forwards; 
     -webkit-transform: translateZ(0); 
     transform: translateZ(0); 
} 
.path.path_before 
{ 
     -webkit-text-stroke: 1px white; 
} 

.path.path_after 
{ 
     -webkit-text-stroke: 1px black; 
} 

それはバニラJSを書き込むことによって、jQueryのコードを最適化することがしばしば可能ですが、改善は一般的に限界であり、結果は一般的に維持することがより困難です。カスタムコードを最初に最適化します。 jankyの吃音を固定この場合

は、おそらくjQueryのコードを最適化するよりもhardware-accelerated CSSを利用して行うことが多くを持っています。