javascript - Zepto.js/CSS3 Webkit 转换在 .anim() 事件后变慢

Question

我有一个奇怪的。我正在制作一个有 2 个按钮的小型 iPad 移动网页。一个如果你触摸添加和删除一个类到一个对象(这只是一个移动其背景位置的图像 Sprite 。)第二个动画相同的对象。但是在我按下动画功能触发按钮后，添加/删除类功能的速度真的非常慢。如此缓慢以至于您看到 Sprite 图像背景位置以慢动作移动？我纳闷了？现在 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 错误。

编辑:另外，1 毫秒的过渡是怎么回事？