基本JS動畫簡化版，正常工作在Safari

因此，這裏是我的動畫功能：基本JS動畫簡化版，正常工作在Safari

function animation(el, isHorizontal, from, to, callback) { 
     var start = true === isHorizontal ? from.x : from.y, 
      stop = true === isHorizontal ? to.x : to.y, 
      intervalId, diff; 

     intervalId = setInterval(function() { 
      diff = Math.abs(stop - start); 
      if (stop < start) { 
       if (diff < 4) { 
        start -= diff; 
       } else { 
        start -= 4; 
       } 
      } else { 
       if (diff < 4) { 
        start += diff; 
       } else { 
        start += 4; 
       } 
      } 
      if (true === isHorizontal) { 
       el.style.left = start + 'px'; 
      } else { 
       el.style.top = start + 'px'; 
      } 
      if (start === stop) { 
       clearInterval(intervalId); 
       callback(); 
      } 
     }, 1); 
    }

它完全在Chrome中，雖然在Safari瀏覽器中，動畫元素似乎停止幾個像素他們都應該之前。

假設我要從左邊移動到左邊：116.在Safari中，元素結束於左側：108，當我打開Inspector查看控制檯並檢查左側偏移是否正確時元素，元素會正確地重新定位。

我需要做的就是打開開發者控制檯，元素跳轉到正確的位置。

很奇怪。

下面是我的一些CSS的可能是相關的：

.box { 
    position: relative; 
    } 
    .item { 
     position: absolute; 
     background-position: left top; 
     background-repeat: no-repeat; 
     background-size: 100% auto; 
     -webkit-transform: transform; 
    }

來源

2013-08-31 Richard Knop

所以看起來在Safari我要觸發硬件加速，否則Safari無法跟上並重新繪製圖像速度不夠快：

-webkit-transform-style: preserve-3d; 
    .item { 
     position: absolute; 
     background-position: left top; 
     background-repeat: no-repeat; 
     background-size: 100% auto; 
     -webkit-transform-style: preserve-3d; 
    }

來源

2013-08-31 13:37:15

不錯，你得到它的工作。不知道'-webkit-transform：transform'應該做什麼？那真的是[有效的語法]（https://developer.mozilla.org/en-US/docs/Web/CSS/transform）？ – Strille

不，這是一個錯誤，對不起。 –

它看起來像有什麼不對您的代碼，但是，當它應該（因爲問題就解決了Safari不進行重繪你打開開發者控制檯）。

如果將1ms間隔增加爲50ms，還是會出現問題嗎？

一個黑客通常的工作原理是通過在動畫結束切換身體上的虛擬類強制瀏覽器重新繪製整個頁面：

if (start === stop) { 
    jQuery("body").toggleClass("forceRepaint"); 

    clearInterval(intervalId); 
    callback(); 
}

你可以這樣做當然沒有jQuery的，但它會變得不那麼簡潔。

此外，如果您使用requestAnimationFrame（）而不是setInterval（）這樣的動畫（以及更好的性能），則很可能會避免此問題。有幾個polyfill在舊瀏覽器中回退到setInterval/setTimeout。

來源

2013-08-31 13:18:22 Strille

我發現了一個更好的解決方案，請查看我的答案。 –

基本JS動畫簡化版，正常工作在Safari

回答

相關問題