2

phonegap での CSS トランジションの操作に少し問題があります。transform: translate3d プロパティを移行して、コンテンツ ビューをスライド インおよびビューから外したり、スライドしてサイド バーを表示したりします。

以下は webapp の例です (トランジションはブラウザで動作することに注意してください): http://ferriesapp.ca/app/

携帯電話とデスクトップの両方のブラウザでトランジションが完全に機能することがわかります。しかし、「phonegap」するとすぐに、トランジションがレンダリングされません。最終的な位置が表示されます。たとえば、出発リストの項目をヒットすると、対応する到着リストの項目が表示されます。しかし、何らかの理由でアニメーションが電話ギャップで発生しません。唯一の例外は、phonegap を通過したときに iOS7 で動作することですが、iOS 6 や Android のどのバージョンでも動作しません。

コードの小さなスニペットを次に示します。

スライド要素の CSS は次のようになります。

#depart-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

アニメーションクラスは次のとおりです。

.animate {
    transition: transform 0.2s ease-out;
    transition: -webkit-transform 0.2s ease-out;
    transition: -moz-transform 0.2s ease-out;
    transition: -ms-transform 0.2s ease-out;
    transition: -o-transform 0.2s ease-out;
}

最後に、それを呼び出す JS (これは関数全体ではないことに注意してください):

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"});

誰かが何か提案があれば、彼らは大歓迎です

ありがとう！

PS非常にうまく機能するCSS3 @keyframesルールがあることは知っていますが、コードを簡単にするためにそれを避けたいと思います

4

1 に答える 1

1

iOS7では動作するがiOS6では動作しないというあなたの声明は、あなたのtranslate3d声明のためにこれが起こっていると私に信じさせます。

ハードウェアアクセラレーションを有効にするためにこの行を入力したと仮定しています-

 transform: translate3d(0,0,0);

ただし、これは iOS 6 デバイスのトリガー ハードウェア アクセラレーションには影響しないという報告がいくつかあります。

私が引用した記事の中で、著者は、次のコマンドのいずれかを使用すると、ハードウェア アクセラレーションがトリガーされると述べています。

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
于 2013-08-16T04:52:52.577 に答える