3

HTML と CSS でモバイル アプリのインターフェイスを開発しています。アプリは多くのフォームを使用しており、jQuery の slideToggle 機能を使用して、使用頻度の低い要素を表示および非表示にしたいと考えています。

jQuery アニメーションはモバイル デバイスではうまく動作しないため、いくつかの調査の結果、CSS の transform: translate3d() のみが Webkit モバイル ブラウザーでハードウェア アクセラレーションを呼び出すようです。

CSS translate 3d を使用してスライド トグルを作成する方法について何か考えはありますか?

みんなありがとう、

G

4

2 に答える 2

1

tranlateY() を使用しても、ハードウェア アクセラレーションは使用されません。

トグル効果に引き続き jQuery Mobile を使用する場合は、Jquery Mobile CSS を変更する必要があります。

これを探します：

.slide.in {
            -webkit-transform: translateX(0);
            -webkit-animation-name: slideinfromright;
            }
.slide.out {
            -webkit-transform: translateX(-100%);
            -webkit-animation-name: slideouttoleft;
        }

@-webkit-keyframes slideinfromright {
            from { -webkit-transform: translateX(100%); }
            to { -webkit-transform: translateX(0); }
        }
@-webkit-keyframes slideouttoleft {
            from { -webkit-transform: translateX(0); }
            to { -webkit-transform: translateX(-100%); }
        }

（ここを参照http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-customtransitions.html）

および変更：

"translateX(-100%)" to "translate3d(-100%,0,0)"<br>
"translateX(0)" to "translate3d(0,0,0)"<br>
"translateX(100%)" to "translate3d(100%,0,0)"

これにより、jQuery for mobile への移行が Webkit デバイスでよりスムーズになります。

Webkit から:

translate3d(x, y, z) x、y、z で要素を移動し、z で要素を移動します。正の z は視聴者に向かっています。x や y とは異なり、z 値はパーセンテージにすることはできません。 https://www.webkit.org/blog/386/3d-transforms/

translate3d を使用すると、CSS アニメーションがハードウェア アクセラレーションにプッシュされることが知られています。基本的な 2D 翻訳を行う場合でも、translate3d を使用するとさらに強力になります!

http://davidwalsh.name/translate3d

このようにして、探しているものを達成できます。

ディエゴ・トリゴ

于 2012-10-10T23:43:25.180 に答える
0

JQuery モバイルのバージョン 1.3.1 では、スライド アニメーションに translate3d が使用されていることをお知らせします。1.3.0 ではありませんでした。

于 2013-07-09T10:42:09.173 に答える