40

PhoneGap を使用して iPad アプリを作成しています。アニメーションに CSS 変換を使用しようとしていますが、デバイスがサポートする可能性のあるハードウェア アクセラレーションを活用するために適切な方法を使用しているかどうかは完全にはわかりません。

ページの上から下にスライドさせたいモーダルウィンドウ(DIV)です。画面の上部に配置された後、jquery を介してクラスを追加することで、ページ自体にアニメーション化されます。

.modal {
      background: url('../images/bgnd-modal.png');
      width: 800px;
      height: 568px;
      position: absolute; 
      top: -618px;
      left: 100px;
      z-index: 1001;
      -webkit-transition: top .25s ease-in; 
  }
.modal.modalOn {
      top: 80px;
  }

iOS 4 を搭載した iPad 2 に展開すると、これは機能しますが、アニメーションが少しぎくしゃくしています。完全に滑らかなアニメーションではありません。これを処理するために別の CSS を使用する必要がありますか? それとも、これは PhoneGap アプリであり、問​​題の DIV が大きな背景画像を持っていることの単なる副作用でしょうか?

4

2 に答える 2

95

少なくとも、空の translate3d 宣言を追加する必要があります。

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

これにより、iOS でハードウェア アクセラレーションが使用されるため、Remy Sharpで実証されているように、iOS でのパフォーマンスが大幅に向上します。

さらに進めたい場合は、アニメーションをリファクタリングして、「トップ」プロパティをアニメーション化するのではなく、Webkit 変換変換を使用します。transform3d プロパティの 2 番目のパラメーターは Y 値です。あなたの例では、を変更し-webkit-transitionて、トップではなく変換プロパティに焦点を合わせます。次に、 のイニシャルwebkit-transformを設定しtranslate3d(0,0,0)ます。

アニメーションを実行するには、クラス.modal.modalOn宣言を次のように変更します。

transform: translate3d(0,80px,0);
-webkit-transform: translate3d(0,80px,0)

これにより、iOS は要素の変換をアニメートし、最初の方法よりもさらにスムーズになるはずです。

-- 注 -- px や em などの測定単位を追加することを忘れないでくださいtransform: translate3d(0,80,0);。

于 2011-06-26T13:09:31.280 に答える
3

追加してみてください：

webkit-backface-visibility: hidden;
于 2012-06-27T06:50:44.140 に答える