問題タブ [translate3d]

CSS には、オブジェクトをパーセンテージで移動するときの標準的な動作があり、このパーセンテージはその親コン​​テナー (div) のサイズを表します。

これは、CSS3 を使用する場合には当てはまりませんtransform: translate3d()。X、Y、Z 座標のいずれかにパーセンテージ値を使用する場合、パーセンテージは親ではなく現在のオブジェクトの寸法を表します。

問題は明らかです。CSS3 アニメーションを使用transform: translate3d()し、動的にサイズ変更可能な親の寸法内で現在のオブジェクトを移動する必要がある場合、その方法がわかりません。例: usingtranslate3d(100%, 0, 0)は、オブジェクトを含むブロックではなく、現在のオブジェクトの物理的な幅だけオブジェクトを移動します。

親の動的に変化する次元を取得する方法について何かアイデアをください。または、ハードウェアアクセラレーションを使用して、現在のオブジェクトを親内で変換する方法はtranslate3d()?

Mozilla Developer Network は次のことを確認しています:パーセンテージ (トランジション内) は境界ボックスのサイズを参照します。

回避策はありますか？

私はCSS翻訳で次のことをしようとしています:

ボタンをクリックすると、風船が現れて飛び去ります。飛行が終了すると、消えて開始位置に戻ります (次にボタンをクリックしたときに同じ動作が発生するようにします)。

今までは以下のようになりました（風船は上に飛んでいるだけで、現れたり消えたりしません）。

HTML

CSS

JS

問題は、display : noneオブジェクトに開始を追加して表示しようとすると、クリックしてアニメーションを追加すると$('.object').show()、アニメーションがまったく開始されないことです。バルーンを飛ばすにはどうすればよいですか?

私は当初、jQuery のスライド関数を使用して、作成中の Cordova アプリでページをビューからスライドさせて (その下にある別のページを表示するために) 使用していました。実際のモバイル デバイス。その理由を突き止め、モバイル デバイスには CSS3 アニメーション/トランジションを使用する必要があることを学びました。具体的には、GPU レンダリングが必要な場合は Translate3d を使用する必要があることを学びました。だから私はこのような変更を加えました：

必要に応じて「out」クラスを切り替えるだけです。

画面上に約 50 ピクセルが残るまで (または、ページが再表示されるまでに約 50 ピクセルが残るまで) トランジションはスムーズに実行され、終了する前に約 1 秒間停止します。なぜこれが当てはまるのか、それとももっと効率的な方法があるのでしょうか。

私が使用しているデバイスには、12 コアの高性能グラフィックスを備えた nVIDIA Tegra 3 CPU が搭載されています。

Ionic で構築された HTML5 アプリ (Cordova を使用) で、stellar.js と iscroll-probe.js (iScroll 5 の一部) を使用して、モバイル デバイスでのスクロールを処理しています。

私の問題は、変換を使用してスクロールするようにstellarJsに指示していることです

ページが上部にあり、ユーザーがそれを下にドラッグすると、CSS スケールを要素に適用して拡大します。

これはスケーリングしますが、ちらつきがあります。これは、Stellar.js が常に要素の変換を上書きするためです。

(ページが 5 px 下の場合)

変換値をコンソール ログに記録すると、次のようになります。

どうすればこれを克服できますか？変換を追加できますか?

私は試した

それでも上書きされ、実際にはアニメーションが悪化します。

どんな助けでもいただければ幸いです

GPU アクセラレーション トランジション用に translate3d を使用してカルーセルを実装しています。カルーセル アイテムにアーティファクト (白/灰色の市松模様の背景) が表示されます。これを追加：

カルーセルの css に追加し、div を移動すると問題は部分的に解決されましたが、オーバーフローしたカルーセル アイテムに市松模様の背景がまだ表示されています。完全に画面の外ではなく、部分的に表示されているものでは、この問題は発生しません。しかし、新しいアイテムが画面に入ると、レンダリングされる前に奇妙な背景で表示されます。

これを解決する方法に関するヒントはありますか?

最小限の js と css translate 3d プロパティを使用して、スムーズ スクロール ライブラリを構築しています。これには（付属のペンとして）基盤がありますが、画像とテキスト コンテンツの数を増やすと、アニメーションが揺れ始め、スクロールするとジャンプすることさえあります。これを達成するために最適なアプローチを使用しているかどうかはわかりません。付属のペンをチェックしてください。

ペンへのリンク

ありがとう ：）