当触摸移动触发时，css过渡不一致 [英] css transition inconsistent when triggered on touch move

问题描述

当用户滚动到某个点以下时，我将触发css位置更改（使用css过渡动画）。这工作正常在chrome / safari在pc上，但是在iphone上不一致。它有时跳而不是动画，有时它什么也不做，有时动画。

I am triggering a css position change (with css transition animation) when the user scrolls below a certain point. This works fine on chrome/ safari on the pc but is inconsistent on the iphone. It sometimes jumps instead of animating, sometimes it does nothing and ocassionally animates.

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

I've tried using jQuery animate, added translate3d and put the element on its own layer, all of which produced the same results.

这里是代码：

    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: .25s top;
-moz-transition: .25s top;
-o-transition: .25s top;
transition: .25s top; /* <-- actual standard */

供应商前缀是惊人的吗？ （不）

Vendor prefixes are amazing right? (not)

这篇关于当触摸移动触发时，css过渡不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！