問題タブ [css-transforms]

モバイルデバイス用のHTML5Webアプリケーションを開発していますが、スムーズなアニメーションで少し問題が発生しました。

基本的に、ユーザーがボタンをタップすると、ドロワー（高さ0pxのdiv）が指定された高さ（ピクセル単位）にアニメーション化され、コンテンツがそのドロワーに追加されます。Pinterestアカウントをお持ちの場合は、http：//m.pinterest.comでアニメーションをそのまま表示できます（[コメント]または[再固定]ボタンをタップします）。

残念な問題は、モバイルデバイスでは、Webkitトランジションがハードウェアアクセラレーションされた高さプロパティではないため、非常に遅く、アニメーションがギザギザになっていることです。

コードスニペットは次のとおりです。

1. HTML：..。

   /li>

2. CSS：

   /li>

3. Javascript（jQueryを使用）：

   /li>

4. スクリーンショット：http ：//imgur.com/nGcnS,btP3W

Webkit Transformsで発生した、完全には理解できない問題は次のとおりです。

1. Webkit Transformsはコンテナーの子をスケーリングしますが、これは私がやろうとしていることには望ましくありません。-webkit-transform: none子供に適用すると、この動作がリセットされないようです。
2. Webkitトランスフォームは兄弟要素を移動しません。そのため、.pin操作しているコンテナの後のコンテナは自動的に下に移動しません。これは手動で修正できますが、面倒です。

どうもありがとう！

translateXまたはを使用translateYすると、Firefoxのページのレイアウトが影響を受けるように見えます。CSS仕様では、これらのプロパティがレイアウトに影響を与えてはならないと規定されていても、永続的なスクロールバーが生成されます。

例として、http： //daneden.me/animateにアクセスし、「fadeOutRightBig」アニメーションをクリックします。スクロールバーは（CSSアニメーションをサポートする）すべてのブラウザーで生成されますが、Firefoxでは存続します。これは、Mozillaまたは他のブラウザによる間違いによるものですか？既知の解決策はありますか？

時間をかけてより多くの CSS3 変換を組み合わせる方法はありますか? たとえば、これを設定すると

そして、しばらくするとこれが

問題が発生しました。最初の変換は 2 番目の変換で上書きされますが、それは私が絶対に望んでいないことです。だから私はこれらの値を組み合わせることができることを観察したので、古いものを一時的に保存してこれを行うことができます

しかし、それは正しくありませんが、呼び出しを繰り返すと問題があります..

css3スケールの正確な値をjavascriptから取得する方法はありますか? js 経由で CSS3 翻訳の正確な値を取得する方法はありますか? 現在、これらの値を持つマトリックスのみを取得しています。もちろん解析できますが、より良い解決策があることを願っています。

そして最後に.. -webkit-transform: matrix(...) はiPadでハードウェアアクセラレーションされていないので、matrix3dだけが方法だと思いますか? これらすべての変換を問題なく正しく組み合わせるには..

どうもありがとう、あなたが私の質問を理解してくれることを願っています:)

transformCSSプロパティのCSStranslate値をリセットするにはどうすればよいですか？

私が持っていると言う：

次に、すべての変換/翻訳をクリアするにはどうすればよいですか？

使用する必要があります： translate(0, 0); /translate3d(0, 0, 0); または transform:auto;？

css3 transform：scale（）を元の値に戻す必要があります。

この例を参照してください。

http://jsfiddle.net/Z2TNw/

クリックすると機能しますが、ホバーアウトすると機能しません。

また、scale（1）に設定してみましたが、それも役に立ちません。

何か案は？

小さな頭脳を3DCSS変換に巻き付けようとしていますが、scaleZ()関数の目的を理解するのに苦労しています。

scale()、scaleX()そしてscaleY()理にかなっています。指定された軸に沿って要素を引き伸ばし、その軸に沿った寸法に指定した数を掛けます。

しかし、scaleZ()違うようです：

1. 要素の子に適用されます
2. HTML要素にはz軸に沿った寸法がないため、子要素の寸法には影響しません（つまり、<div>「太く」することはできません）。

WebKitブログによると：

[ scaleZ()]は、変換された子のz軸に沿ったスケーリングに影響します。

これが実際に何を意味するのか理解できません。誰かが、できればいくつかのサンプルコードで説明を提供できますか？

スライダー 1、2、3 のようなこれらの変換をトリガーし、前後に交互に切り替えるには、ボタンの JavaScript を使用する必要があります。Apple Web サイトの iPhone 機能スライダーのように。誰？

HTML:

CSS: (2 と 3 で同じ)

Android 固有の Web アプリのメニューをアニメーション化するために、いくつかの CSS3 2D 変換を使用しています。

ontouchstart 関数がトリガーされた後にのみ適用されるため、Javascript を使用してアニメーション パラメータを挿入しています。

例として、アニメーションの最初の部分の JavaScript を次に示します。

slide1アニメーション用の CSS3 は次のとおりです。

このコードはアニメーションを正しく表示しますが、アニメーションの各状態が完了すると消えます。私が読んだことから、これは-webkit-animation-fill-mode:forwardsorを使用して解決する必要があります-webkit-animation-iteration-count:1が、どちらも再生後にアニメーションを停止/一時停止していないようです。

他の誰かが Android で同様の問題に遭遇しましたか? 助けてください。ありがとう

何らかの理由で、変換を使用して画像が拡大されると、Chrome は画像を再アンチエイリアスしませんが、Safari はそうするようです。仕様では Safari が正しいと考えているようです。そのため、Chrome のバグを報告する以外に何をすべきかわかりません。

助言がありますか？

サンプル画像