Zepto.js/CSS3 Webkit Transforms .anim（）イベントの後にスローダウンします。

Question

私は奇妙なものがあります。私は2つのボタンを持つ小さなiPadのモバイルWebページを作っている。タッチするとオブジェクトにクラスを追加したり削除したりします（これは背景の位置を移動するイメージスプライトだけです）。2番目のオブジェクトは同じオブジェクトをアニメーション化します。しかし、の後に私はアニメーション機能のトリガーボタンを押しましたが、クラスの追加/削除は本当に非常に遅くなります。スローモーションでスプライト画像のバックグラウンド位置がゆっくりと変化するのは遅いですか？私は困惑していますか？ Zepto.js anim関数はwebkit css3変換を使用します。それは彼らの問題かもしれませんか？彼らはかなり最近ですか？

CSS

#hero { 
    left: 320px; 
    position: absolute; 

} 
.hero_crouch { 
    background: url(../assets/sprites/sprites_8.png) 1px 0; 
    width: 109px; 
    height: 130px; 
} 

ボタン1：

$('#hero').addClass('hero_walk') //initial class added 
$('#bottom_mid a').bind('touchstart', function() { 
      return $('#hero').addClass('hero_crouch'); 
     }); //new class temporarily added on touch 
$('#bottom_mid a').bind('touchend', function() { 
      return $('#hero').removeClass('hero_crouch'); // then class removed again 

ボタン2：

$('#mid_right a').bind('touchstart', function() { 
     return $('#hero').anim({ 
     translate3d: '50px, 0px, 0px' 
     }, 1, 'ease-in-out 1ms'); 
    }); 

Answer 1

私はZeptoを使ったことがないが、この問題が関係している可能性があると思われる。 Slow animation with webkit-transform translate() in iPhone OS 3.0

は、CSSを介してこれをやってみてください。

#hero { 
    /*your code*/ 
    -webkit-transition: -webkit-transform 1s ease-in-out; 
} 
.anim { 
    -webkit-transform: translate3d(50px, 0px, 0px); 
} 

そして...

$('#mid_right a').bind('touchstart', function() { 
     return $('#hero').addClass('anim'); 
}); 

これは同じ問題を顕在化した場合、それはWebkitのバグです。

編集：また、1msの移行は何ですか？