1

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

#mainpage{
    z-index: 10;
    top: 0;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    border-bottom: 1px solid #111111;
}
#mainpage.out{
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

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

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

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

4

1 に答える 1

0

これはアニメーションを行うべき方法ではないと思います。

次のことを試してください。

#mainpage {
   z-index: 10;
   top: 0;
   border-bottom: 1px solid #111111;
   -webkit-transition: -webkit-transform .5s linear;
   transition: transform .5s linear;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

#mainpage.out {
   -webkit-transform: translate3d(0,-100%,0);
   transform: translate3d(0,-100%,0);
}

最初の変更は、アニメーション化するプロパティのタイプ (transitionパラメーター) を指定することですall。

次に、「戻る」トランジションを で指定しますtranslate3d(0,0,0)。ただし、ここで違いが生じるかどうかもわかりません。これがお役に立てば幸いです。

于 2014-09-10T06:12:54.233 に答える