Question

在视口宽度低于1068像素或手机上查看my page（登录=＆＃34; mmt＆＃34; | pass =＆＃34; mmt_nv2014＆＃34;）时，汉堡包图标（左上角））通过以下代码打开从左侧滑动的菜单：

$( '#mobile_left_menu_icon' ).click(function() {
    if( $('#mobile_left_menu').css('left') == '-280px' ) { 
        $( "#mobile_left_menu" ).animate( { left: "0" }, open_delay, 'easeInOutExpo' ); 
        $( "#wrapper" ).animate({ left: "280px" }, open_delay, 'easeInOutExpo' );
        $( "#mobile_top_menu" ).animate({ left: "280px" }, open_delay, 'easeInOutExpo' );
        $( 'body' ).addClass( 'overflow_hidden' );
    }
    else { 
        $( "#mobile_left_menu" ).animate({ left: "-280px" }, close_delay, 'easeInOutExpo' );
        $( "#wrapper" ).animate({ left: "0" }, close_delay, 'easeInOutExpo' );  
        $( "#mobile_top_menu" ).animate({ left: "0" }, close_delay, 'easeInOutExpo' );  
        $( 'body' ).removeClass( 'overflow_hidden' );
    }
});

出于某种原因，与具有类似滑动菜单的任何其他网站相比，智能手机上的动画感觉相当不稳定。那是为什么？

Answer 1

尝试添加

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

我还建议在菜单中添加一个设置高度，这通常有助于在转换时闪烁。

移动菜单的生涩滑动动画

1 个答案: