ブートストラップを使用してサイトを構築しましたが、iPad (私の場合は 3) でポートレート モードになると、メニューのスライドが非常に遅くなることに気付きました。ipad3(ポートレートモード、他のiPadについては不明)でサイトを見ると、サブメニューの表示がいかに遅くて途切れ途切れであるかがわかります。iphoneなら大丈夫です(私はiphone4sです)
.toggleSLide()
だから私は、非常にシンプルで何もない同じものを使って自分自身を構築することを考えました. .show()
andを使うことも考えまし.hide()
たが、その場合でも、アクションは非常に遅いです。
最終的に、少し解決するCSSアニメーションを使用しました:
$(".btn-navbar").click(function(){
$(".nav-collapse .nav").toggleClass('show');
});
そしてCSS
.nav {
height: 0;
}
.show{
-webkit-transition: height 0.2s linear;
height:300px;
overflow:hidden;
-webkit-transform: translateZ(0);
}
しかし、どのタブレット/モバイルでそのCSSアニメーションがサポートされていますか?
問題はwhen が表示されている.children()
要素と関係があると思います。.nav
基本的に、ブートストラップ サイトを取得して、ipad3 のポートレート モードで表示します。クリックでスムーズなサブ メニューの表示/非表示を行うにはどうすればよいでしょうか?