jquery - translate ease for translate only 首次在 iPhone 上流畅

Question

这是一个基本的移动滑入/滑出菜单。

我发现很难调试，但基本上我的问题是，当我按下菜单按钮时，菜单会顺利打开，再次按下它会顺利关闭。然而，当我再次按下它(第三次)时，它不顺利打开，它只是出现。但是它仍然顺利关闭。

我希望它始终顺畅地打开和关闭。我无法找出原因，但我认为它与它在关闭时到达的位置有关。几乎就好像它与页面加载时的位置不同一样。

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

试试这个

var menuIcon =  $('.mobile-menu')[0]; //or just give your menu icon a id   
var nav = $('.nav-menu')[0];    
$(menuIcon).click( function(){
    $(nav).toggleClass('open');  
});