モバイル/スキニー部分がさまざまなパネルを画面外に隠すレスポンシブ 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);
}