javascript – 在触摸移动时触发css过渡不一致

当用户滚动到某个点以下时,我正在触发css位置更改(使用css过渡动画).这适用于电脑上的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;
}

解决方法

我很惊讶-webkit-transition在iPhone上工作.

通常你会看到类似的东西：

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

供应商前缀是惊人的吗？ (不)