Zepto.js/CSS3 Webkit transformiert Verlangsamt nach .anim() Ereignis

Question

Ich habe eine komische. Ich mache eine kleine iPad Mobile Webseite, die 2 Tasten hat. Wenn Sie berühren, wird eine Klasse zu einem Objekt hinzugefügt und entfernt (das ist nur ein Bild-Sprite, das seine Hintergrundposition verschiebt). Das zweite animiert dasselbe Objekt. Aber nach Ich habe die Animate-Funktion Trigger-Taste gedrückt die Add/Remove-Klasse-Funktion geht wirklich sehr langsam. So langsam, dass sich die Position des Sprite-Bildhintergrunds in Zeitlupe verschiebt? Ich bin verwirrt? Jetzt verwendet die Zepto.js anim Funktion webkit css3 transforms. Könnte es ein Problem mit ihnen sein? Sie sind ziemlich neu?

CSS

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

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

Button 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 

Taste 2:

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

Answer 1

Ich habe noch nie Zepto verwendet, aber es scheint, dass dieses Problem in Zusammenhang stehen könnten: Slow animation with webkit-transform translate() in iPhone OS 3.0

dies durch CSS

Try tun:

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

Und dann ...

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

Wenn dies das gleiche Problem manifestiert, dann ist es ein Webkit Fehler.

Edit: auch, was ist los mit der 1ms Übergang?