javascript - 触摸移动时触发的 css 转换不一致

Question

当用户滚动到特定点以下时，我触发了 css 位置更改(使用 css 过渡动画)。这在 pc 上的 chrome/safari 上工作正常，但在 iphone 上不一致。它有时会跳跃而不是动画，有时它什么也不做，偶尔会动画。

我试过使用 jQuery animate，添加了 translate3d 并将元素放在它自己的层上，所有这些都产生了相同的结果。

代码如下:

    var logoUp = false;
    $(window)[0].addEventListener('touchmove', function(e) {
      console.log($(window).scrollTop());
      if ($(window).scrollTop() > 33) {
         if(!logoUp){
           $('.trig_logo').css({ 'top': '-90px' })
           logoUp = true;
         }


      } else {
           if(logoUp){
           $('.trig_logo').css({ 'top': '0px' })
           logoUp = false;
         }
      }
    })

CSS

.trig_logo {
    background:url(/img/head_foot/logo.png)  center 0px no-repeat;
    height:400px;
    position: absolute;
    width:100%;
    top:0px;
    -webkit-transition: 0.25s top;
}

Answer 1

令我惊讶的是 -webkit-transition 竟然能在 iPhone 上运行。

通常您会看到如下内容:

-webkit-transition: .25s top;
-moz-transition: .25s top;
-o-transition: .25s top;
transition: .25s top; /* <-- actual standard */

vendor 前缀很棒吧？ (不是)