Question

我有一个奇怪的。我正在制作一个有2个按钮的小型iPad移动网页。如果你触摸一个对象添加和删除一个类（这只是一个移动其背景位置的图像精灵。）第二个动画相同的对象。但是在之后我按下了animate函数触发按钮，添加/删除类功能真的很慢。你慢慢看到精灵图像背景位置在慢动作中移位？我很困惑？现在，Zepto.js动画函数使用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过渡会怎样？

Zepto.js / CSS3 Webkit转换在.anim（）事件之后减慢

1 个答案: