1

一般的なモバイル UI パターンはスライド アップ/スライド ダウンです。たとえば、アクション シートを上にスライドし、それが表示されていないときに画面の下にスライドさせます。

さまざまな css 3 トランジションと Zepto のアニメーション機能を試しましたが、Android と iPhone でスムーズかつ一貫して動作するものをまだ見つけていません。

この投稿は、決定的な質問と回答として役立つと思います。

Android および iPhone ブラウザー (および拡張 PhoneGap) でスムーズなスライドアップ/スライドダウンを機能させるにはどうすればよいですか?

これは始まりです：

#action-sheet {
  background-color: #333;
  height: 200px; /* note that the height changes depending
                   on # of action divs added to the action picker,
                   dynamically from Javascript */
  width: 250px;
  position: fixed;
  bottom: -50%; /* something that will get it off the screen */
  left: 50%;
  margin-left: -125px;
  /* maybe some css3 transition here? */
}
#action-sheet.active {
   bottom: 0px;
}
4

1 に答える 1

0

iOS および Android ブラウザーは、3D 変換がハードウェア アクセラレーションである Webkit レンダリング エンジンを使用するため、それを使用する必要があります。translate3d を使用する必要があります。

アクティブなクラスを #action-sheet に追加すると、2 秒間で 200px 下にスライドします

#action-sheet {
  -webkit-transition: -webkit-transform 2s;
}
#action-sheet.active {
  -webkit-transform: translate3d(0,200px,0);
}
于 2012-08-10T18:58:00.360 に答える