問題タブ [translate3d]

このスニペットを実装しました：

CSS

HTML

実際の例については、この Fiddleを確認してください。

ご覧のとおり、 の平行移動はx 軸とy 軸:hoverにのみ影響します。.part

z 方向には移動しません。

私が間違っていることを知っている人はいますか？

これは奇妙なものです！

概要：
私はWebアプリを作成しており、Facebookアプリにあるものと同様のメニューを作成しました。右にスワイプすると表示され、左にスワイプすると非表示になります。

これを行うには、タッチスタートイベントをページの本文にバインドします。この時点で、指を押す開始ポイントを記録し、タッチムーブイベントとタッチエンドイベントもバインドします。touch moveイベントは、現在の指の位置を検出し、translate3d（x、y、z）を指の位置​​に一致するように設定することにより、ページコンテンツを含むdivを移動します。

それは実際に本当に素晴らしい働きをします。

次に、タッチエンドで、指がメニューの表示をトリガーするのに十分な距離まで移動したのか、コンテンツが元の位置に戻るのに十分な距離に移動したのかを調べます。選択に関係なく、コンテンツdivに-webkit-transition：-webkit-transformなどを適用するクラスを適用します。次に、もう一度translate3d（x、y、z）を使用して、決定された終了位置を設定し、それ以上のタップが一時的に機能しないようにする変数も設定します。

そして、これは問題があるところです！

問題：
この時点で、コンテンツが基本構造、つまり記事のレイアウトページで単純な場合、移行は迅速かつ瞬時に行われます。でも！コンテンツが複雑な場合、つまりデータのテーブルが大きい場合は、1〜30秒の範囲で一時停止が発生します...非常にイライラします。

最終的に機能する場合、コールバックは本体からtouchmoveイベントとtouchendイベントのバインドを解除し、タップを停止する変数が設定解除され、再開する準備が整います。

私はiPad1でテストしています。スワイプの速度と一時停止の長さの間に相関関係はないようです。また、コンテンツが移動するために残された距離の間に何もありません。

最後に、これが鍵だと思います！
同じ開閉アクションを自動的に実行するボタンがあり（これもFacebookのように）、正常に機能します。スワイプすると一時停止し、そのボタンをタップすると、ベースが切り替わるときに間違った方向ではありますが、すぐに機能し始めます。すでに開くように設定されている変数。ある種のアニメーションキューをクリアして、それ自体を整理するようなものです...

いくつかのコード：
javascript

上で使用したsettransformプラグイン。

CSS、非常にシンプル。適用される他のスタイルもありますが、それらは純粋に視覚的なものです。

長い投稿で申し訳ありませんが、これは私をたくさん悩ませてきました！問題を分類できない場合は、それを取り除かなければならない時点です。

誰かがこれを以前に見たことがあり、助けてくれることを願っています。（または、上記のコードで明らかに明らかなエラーを確認できます！）

ありがとう、

意思 ：）

私はスムーズなアニメーションを得るために、ウェブ上で何時間も検索して費やしてきました.

translate3d プロパティを使用して以下のような要素プロパティを設定すると、ハードウェア CPU アクセラレーションが自動的にトリガーされるというのは正しいですか?

これを設定した後、3d プロパティをアニメーション化する必要がありますか? または、CSS プロパティをアニメーション化できますか。

これをアニメーション化するには、別のクラスがあります

次に、jQuery を使用して div 要素をアニメーション化します。

私はここでそれを正しい方法でやっていますか？最高のパフォーマンスを得るには、何を使ってアニメーション化すればよいでしょうか? もしそれがtranslate3dの方法だったら..それなら、operaやchromeなどの他のブラウザをサポートするために、コードに余分な行がたくさんあるでしょうか?

よろしく、

クリス。

10.7.1 を実行している Mac で Chrome を 17 から 18.0.1025.142 に更新したところ、サイトのパフォーマンスが低下しました。画面上で多数のアイテムを移動できる場合は、translate3d を使用しています。requestAnimationFrame でアニメーション化しています。17 では、フレームレートが 50 fps を超えていました。15fpsを取得できてラッキーです。それは本当に悪いです。

ハードウェア アクセラレーションはデフォルトでオフになっていますか? 他の誰かがこのような問題に気づきましたか? フォントのレンダリングが改善され、現在は Safari (サイトを美しく実行しています) と同等になっていることに気付きました。この変更は、一般的なレンダリング パフォーマンスに影響を与えたのでしょうか?

残念ながら、NDA のためリンクを共有することはできません。しかし、どんな助けでも大歓迎です！

アップデート：

私が知る限り、まだ GPU で高速化されていますが、パフォーマンスは非常に悪いです。他の人も同様のことを報告しています。v19 の Chromium ビルドは、以前の品質のパフォーマンスに戻っているようです。

chrome --show-composited-layer-borders を起動すると、gpu アクセラレーション要素の周りに赤い境界線を表示するフラグがありました。このオプションは chrome://flags/ に追加されたようですが、レイヤーの周りに緑の境界線を描画し、GPU 要素を区別していないようです。要素が GPU によってレンダリングされているかどうかを表示するオプションを知っている人はいますか?

chrome://gpu/ は、すべてがハードウェアアクセラレーションされていると言います...

私は次のことをしたいと思います: パースペクティブを持つコンテナーと、translateZ 値を持つ内部要素が与えられた場合、周囲のコンテナーの上部に視覚的に触れるために、translateY で「プルアップ」したいと思います: http://jsfiddle .net/8R4ym/129/

コンテナのパースペクティブ値、要素の幅と高さ、およびそのような「トップ」計算に到達できるZ-translationを考えると、ある種の式はありますか? 私はそれをいじっていますが、それらはすべて変数であるように見えるため、いくつかのルールを見つけることができないようです。

助けてくれてありがとう。

回転するアニメーションをdivに適用したいのですが、停止するまで継続的に繰り返されます。

アニメーションパラメータを含むクラス'spinning'をdivに追加し、el.removeClass（'spinning'）を使用してクラス'spinning'をdivから削除しました。

アニメーションは機能し、ChromeとSafariでクラスを削除すると停止します。しかし、私のAndroidテストデバイス（4.0.1）では、アニメーションが停止せず、アニメーションクラスを削除すると継続的に繰り返されます。

クラス「spinning」と残りのアニメーションのコードは次のとおりです。

iPhone用のタッチイベントと組み合わせたキュービックバイザータイミング関数を使用して要素をアニメーション化し-webkit-transform: translate3d(x,y,z)、カスタムのscrollmethodタイプのものを作成しています。

問題は、要素（この場合はページdiv）が特定のサイズを超えると、アニメーションが途切れる（要素が0.5秒間停止する）ことです。幅が320px、高さが1000pxの場合、これはすべて問題なく機能しますが、高さを2000pxにすると、不快なスタッターが発生します。読み込み中のように、最初は1回だけ途切れることに注意してください。その後、問題はありません。

既知の回避策はありますか？

要素の Y 軸を 50% 移動すると、親の高さの 50% ではなく、それ自体の高さの 50% だけ下に移動します。翻訳要素に、親要素に基づいて翻訳パーセンテージを設定するように指示するにはどうすればよいですか? それとも私は何かを理解していませんか？

http://jsfiddle.net/4wqEm/2/

ブラウザーがサポートしtranslate3dているかどうかを検出するには (WebKitCSSMatrixウィンドウ内 && m11new WebKitCSSMatrix() 内)

しかし、現在、Firefoxtranslate3dはそれを正しく検出する方法をサポートしていますか?

アイデアは、Modernizr を使用せずに解決策を見つけることです。