手机菜单生涩的滑动动画 [英] Mobile menu's jerky sliding animation

问题描述

当查看视口宽度小于1068px的我的页面（登录= mmt | pass = mmt_nv2014）时或在移动电话上，汉堡包图标（左上角）通过以下代码打开从左侧滑动的菜单：

When viewing my page (login = "mmt" | pass = "mmt_nv2014") with viewport width below 1068px or on a mobile phone, the hamburger icon (top left) opens a menu sliding from the left via this code:

$( '#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' );
    }
});

尽管如此，由于某些原因，与其他滑动类似的网站相比，该动画在智能手机上感觉非常生涩菜单。为什么？

For some reason though, the animation feels quite jerky on a smartphone compared to any other website with similar sliding menu. Why is that?

推荐答案

尝试添加

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

我还建议为菜单添加一个设定的高度，因为这通常有助于过渡时的闪烁。

I would also recommend adding a set height to the menu as that usually helps with the flicker while transitioning.

这篇关于手机菜单生涩的滑动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！