2

私はモバイル/タッチデバイス展開用のHTML5アプリを開発しており、PhoneGapを利用しており、現時点ではiOSプラットフォーム(Webkit)のみを対象としています。

私の問題は、Webkitが奇妙なことをする傾向があるという点で、CSS3トランジションで発生します(通常のjQueryアニメーションでも発生します)。たとえば、ここで表示できるコード(http://jsfiddle.net/lvl99/dSjcj/)では、ページをステップスルーするときに、シーケンスに戻ると(つまり、5ページから1ページに)、アニメーションが正常にレンダリングされます。ただし、前に進む(つまり、1ページから5ページに進む)と、ほとんどが醜い側で一貫性のないレンダリングが生成されます(Safariで表示することを忘れないでください。Safari5.1.7を使用しています)。

私はもともとjQueryMobileフレームワークを使用して開発していましたが、使用していた主要な機能はハッシュタグとトランジションを介したページルーティングでしたが、トランジションでこれらの問題が発生したため、JS/CSSを回避するためのより簡単なソリューションを開発しようとしましたjQMと競合します。残念ながら、私が出てきたエラーは実際にはSafari/Webkitに関連している可能性があります。

私はもともとjQuery.animate()左側のプロパティで使用していましたが、現在transformはjQMの方法に似たCSS3手法を使用して、速度を上げ、適切にレンダリングできるかどうかをテストしています。どちらも、さまざまな程度の機能不全に対応していません。

幸い、Firefoxはすべてを正常にレンダリングします。問題はありませんが、Firefoxはターゲットプラットフォームではなく、プロジェクトがPhoneGap環境のXcode内でコンパイルされると、Safariと同じ問題が発生します。以前の開発バージョンでjQMをまだ使用していたとき、Safariはそれを正常にレンダリングしました(iPadシミュレーターのSafariを含む)が、UIWebViewはそうではありませんでした。これはおそらくそれがNitroJSエンジンの問題であると私に思わせました(おそらくUIWebViewにはトランジションを適切にレンダリングする速度/パワー/機能がありませんでした-レンダリングを解放するためにすべてのアニメーションをCSS3に転送しようとしましたGPUへの操作)。

jQuery TransitjQuery Animate EnhancedTransformJSなどのさまざまなプラグインを使用しました。また、jQM内で独自のカスタムトランジションハンドラーをコーディングしようとしましたが、正しくレンダリングされませんでした(ただし、最も近いものになりました。FirefoxとSafariで機能し、UIWebViewでは機能しませんでした)。

さまざまな種類のコンテンツを含む要素の遷移に関しても一貫性のない結果が得られました。ビデオ、画像、フロート要素、複数の段落がすべてテストされています。シーケンスの両端(つまり1と5)への/からの遷移に関する問題もある段階でありましたが、今の私の問題はその昇順のページ遷移(つまり1から5)です。

私はこれに何日も費やして、この一見小さな問題に対処しようとしましたが、ユーザーがアプリ内を移動する方向に基づいてコンテキストに応じたこのようなスライドトランジションを持つユーザーエクスペリエンスには非常に重要です。最も簡単な解決策は、トランジションを削除することですが、Webkit / UIWebViewで問題が発生していることを正確に理解する方法がある場合は、その解決策を作成します。jQMがトランジションで経験するちらつきの問題にも関連していることは間違いありません。-webkit-backface-visibility: hiddenデフォルトの変換プロパティを設定するなど、Web上で提案された人々のためのCSS修正の多くも機能しませんでした-webkit-transform: rotateX(0)

4

1 に答える 1

2

問題は、右から次のアイテムをアニメーション化するのではなく(1-> 2-> n上に移動する場合)、前のアイテムのアニメーション化が完了したときに単に「.show()」することです。

ちょっと待って、.jsをステップスルーしてください

...

わかりました、私はそれが何であるか、それが何をしているのかを知っていると思います、それが右から左(数値的に上)に移動しているとき、あなたは新しいページ(より大きな数字)が左から入ってくるのを見ることができません。小さい方の数字が移動するため、100%-> 0%から移動します。

わかりました、それは間違っていると思います...

と宣言の100%toを変更すると92.5%、うまくいくはずですが、残念ながら、私たちが多くの企業作業を行っているため、CSS変換を避けている理由を正確に説明することはできません。そのため、IE7+をサポートする必要があります。 6でも:(@-webkit-keyframes slideinleft@-moz-keyframes slideinleft

私があなたのために働いた(うまくいかなかった)92.5%最も低い賢明な値を見つけたかった以外の値を試すことができることに注意してください95%

于 2012-07-09T02:48:30.440 に答える