CSS3 Transform動畫在Safari/UIWebView中效果不佳

Question

我正在開發用於移動/觸摸設備部署的HTML5應用程序，並且正在使用PhoneGap並且目前只針對iOS平臺（Webkit）。

我的問題發生在CSS3轉換中（它也發生在常規的jQuery動畫中），因爲Webkit往往會做一些奇怪的事情。例如，當您瀏覽頁面時，在查看here（http://jsfiddle.net/lvl99/dSjcj/）的代碼中，返回順序（即從第5頁到第1頁）將使動畫變得更加精細，但是向前邁進（即從第1頁到第5頁）會產生不一致的渲染，主要是醜陋的一面（請記住在Safari中查看它，我一直在使用Safari 5.1.7）。

我最初是在開發使用jQuery Mobile框架，但我使用的關鍵功能是通過主題標籤和轉換的頁面路由，但是由於我在轉換時遇到了這些問題，我嘗試開發一個更簡單的解決方案以避免任何JS/CSS與jQM衝突。唉，有可能我出現的錯誤實際上是與Safari/Webkit相關的。

我原來用左邊的jQuery.animate()屬性，到現在使用CSS3 transform的技術類似於jQM的處事方式，也幫助用速度和測試是否會更願意渲染正確。兩者都沒有工作到不同程度的工作。

幸運的是，Firefox呈現一切正常。它沒有問題，但是Firefox不是目標平臺，當項目在PhoneGap環境的Xcode中編譯時，它表達了Safari與之相同的問題。當我還在使用早期開發版本的jQM時，Safari會渲染它（包括iPad模擬器上的Safari），但是UIWebView不會。這讓我想，也許這是一個Nitro JS引擎問題（因爲UIWebView可能沒有適當渲染轉換的速度/能力/能力 - 我試圖將所有動畫轉移到CSS3以降低渲染對GPU的操作）。

我已經使用了各種插件，如jQuery Transit,jQuery Animate Enhanced和TransformJS。我也嘗試在jQM中編寫我自己的自定義轉換處理程序，並且它沒有正確呈現（儘管它最接近：在Firefox和Safari中工作，而不在UIWebView中）。

我對使用不同類型的內容過渡元素的結果並不一致：視頻，圖像，浮動元素，多個段落都是我測試過的。在某個階段，過渡到/從序列的極端（即1和5）也存在問題，但現在我的問題就是上升的頁面轉換（即1到5）。

我已經花了很多天的時間試圖解決這個看似微不足道的問題，但是對於像這樣的幻燈片切換的用戶體驗而言，這是非常不可或缺的，這種切換基於用戶在應用中移動的方向。最簡單的解決方案是隻刪除轉換，但如果有一些方法可以理解Webkit/UIWebView究竟有什麼問題，可以爲它創建一些解決方案。毫無疑問，這也與jQM在過渡時遇到的閃爍問題有關。在網絡上建議的那些人的很多CSS修補程序也不起作用，例如-webkit-backface-visibility: hidden以及設置默認轉換屬性-webkit-transform: rotateX(0)。

Answer 1

看起來問題在於，它不會動畫右下一個項目（當向上移動1-> 2-> n時），而只是在上一個項目完成動畫時顯示「.show（）」出。

給我一秒鐘穿過。JS

... 

好吧，我想我知道它是什麼，它做的是，當它的移動從右到左（數字了），你不能看到新的頁面（高數）的未來從左側開始，因爲「左側」正從100％→0％移動，因爲較小的數字正在移出。

好吧，我認爲這是錯誤的...

如果更改100%到92.5%在@-webkit-keyframes slideinleft和@-moz-keyframes slideinleft聲明那麼它應該爲你工作，不幸的是我不能告訴你到底爲什麼，因爲我們（工作）避免CSS轉換，因爲我們做了很多公司工作，所以仍然需要支持IE7 +，有時甚至需要支持6個：（

請注意，您可以嘗試一個除92.5%以外的值我只是想找到最低的合理值爲你工作（95%沒有工作）