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

Posted 2023-03-06

【中文标题】触摸移动触发时css过渡不一致

【英文标题】：css transition inconsistent when triggered on touch move

【发布时间】：2013-10-10 02:39:08

【问题描述】：

当用户滚动到某个点以下时，我正在触发 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;

【参考方案1】：

我很惊讶-webkit-transition 完全可以在 iPhone 上工作。

通常您会看到如下内容：

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

供应商前缀很神奇吧？ （不是）

【讨论】：

我们在 iPhone 上使用 safari，在其他元素上使用 -webkit-transition，它们的动画效果很好。