翻訳のためのトランジションがスムーズ初めてのIphone

Question

これは基本的なモバイルスライドイン/スライドアウトメニューです。

私はデバッグが難しいと思っていますが、基本的にはメニューボタンを押すとスムーズにメニューが開き、もう一度押すとスムーズに閉じられます。しかし、私がもう一度（3回目）それを押すと、ではなく、がスムーズに開きます。しかし、それはまだスムーズに閉鎖し続けます。

いつも円滑に開閉したいです。私は原因を理解することはできませんが、私はそれが終わったときに到達しているポジションと何かを考えています。ほぼ同じ位置にないかのように、ページが読み込まれたときのようでした。

JS

$('.mobile-menu').click(function(){ 
    $(this).next().toggleClass('open'); 

}); 

HTML

<div id="top-links"> 

     <div class="mobile-menu"> <span></span><span></span><span></span><div>Menu</div></div> 
     <ul class="nav-menu"> 
      <li><a href="">About</a></li> 
      <li><a href="">Blog</a></li> 
      <li><a href="">account</a></li> 
      <li><a href="">Help</a></li> 


     </ul> 
    </div> 
</div> 

CSS

#top-links { 
    margin-right: 2.5%; 
    width: 140px; 
} 

.nav-menu { 
    background: rgba(0, 0, 0, 0) url("../image/grey-bg.jpg") repeat scroll 0 0; 
    padding-bottom: 38px; 
    top: 100px; 
    width: 90%; 
    padding-left:10%; 
    -webkit-transform: translateX(100%); 
    -moz-transform: translateX(100%); 
    -o-transform: translateX(100%); 
    transform: translateX(100%); 
    transition: transform .5s ease; 
    -webkit-transition:-webkit-transform .5s ease; 
    overflow: hidden; 
    height:240px; 
    -webkit-backface-visibility: hidden; 
    position:absolute; 
    left: 0px; 

} 

.nav-menu.open { 
    -webkit-transform: translateX(0%); 
    -moz-transform: translateX(0%); 
    -o-transform: translateX(0%); 
    transform: translateX(0%); 
    transition: transform .5s ease; 
    -webkit-transition:-webkit-transform .5s ease; 

} 


.nav-menu::after { 
    background: rgba(255,255,255,0.27); 
    bottom: 0; 
    content: ""; 
    height: 90px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    bottom:-73px; 
    transform: rotate(-1deg); 
    -o-transform: rotate(-1deg) ; 
    -webkit-transform: rotate(-1deg) ; 
    -moz-transform: rotate(-1deg) ; 
} 

Answer 1

この

012をお試しください