當觸摸移動觸發時，css轉換不一致

當用戶滾動到某個點以下時，觸發css位置改變（使用css轉換動畫）。這適用於PC上的Chrome/safari，但在iphone上不一致。它有時會跳躍而不是動畫，有時它不會做任何事情，也不會動畫。當觸摸移動觸發時，css轉換不一致

我試過使用jQuery的動畫，增加了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; 
}

來源

2013-10-03 frank_texti

我是在一個iPhone驚訝-webkit-transition在所有工作。

通常你會看到類似這樣的：

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

供應商前綴是驚人的吧？（不是）

來源

2013-10-03 11:54:15 Halcyon

我們在iPhone上使用safari並在其他元素上使用'-webkit-transition'，並且它們的動畫效果很好。 –

當觸摸移動觸發時，css轉換不一致

回答

相關問題