3

モバイル/スキニー部分がさまざまなパネルを画面外に隠すレスポンシブ Web アプリを構築しています。これらのアイテムを右側にずらして配置すると、つまりleft: 100%「非表示」にするとアイテムが正しく非表示にならないことがわかりました。これは、アイテムがhtmlおよびbody領域の外側に配置されていても、モバイル サファリでは引き続きアイテムが表示されるためです。

このクラスを追加して、これらの非表示のアイテムをスライドさせたいと思います: .focused(jQuery クリック イベントを使用)。これにより、left値が に変更され0ます。このクラスには、アニメーションも処理する CSS 変換が適用されています。

テスト中に、非表示のパネルを左側に配置すると正しく機能することがわかりました。

誰かが私が持っているものよりも良い解決策を提供できますか? 非表示のコンテンツを右側に配置する必要があります。

何が起こっているかを示す CSS を次に示します。

#hidden-item {
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}


#hidden-item.focused {
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
4

2 に答える 2

0

見た目からして、あなたはもうすぐそこにいます。#hidden-item の親要素に幅が設定され、位置が固定または絶対であることを確認する必要があります。

CSS を少し変更したこの jsfiddle をチェックしてください: http://jsfiddle.net/HNrCD/2/

于 2012-06-08T06:39:47.650 に答える