How to solve the problem of mobile animation stutter caused by code? - Codes Helper

would you please quote jquery.js, to run the code? it"s OK on Xiaomi phone. There are obvious stutters on Huawei Meizu and vivo, iphoneSE can, and iphone6s have obvious stutters. There must be this kind of problem in some untested models. I don"t know what the problem is. Thank you for your help.


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <title></title>
        <link href="css/index.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/common/jQuery-2.1.4.js"></script>
        
        <script type="text/javascript" src="js/common/index.js" ></script>
        <style>            
            body {
                background: -webkit-radial-gradient(circle, -sharp2d4959 0%, -sharp101821 100%);
                background: radial-gradient(circle, -sharp2d4959 0%, -sharp101821 100%);
            }                        
        </style>
    </head>
    <body>
        <div class="index_content">
            <div class="index_menu page-active-1">
                <div class="index_menu-item index_menu-item-1 m--btn js-menuBtn" data-page="1">
                    <span class="index_menu-item-content"></span>
                </div>
                <div class="index_menu-item index_menu-item-2" data-page="2">
                    <span style="left: -18px;" class="index_menu-item-content"></span>
                </div>
                <div class="index_menu-item index_menu-item-3" data-page="3">
                    <span class="index_menu-item-content"></span>
                </div>
                <div class="index_menu-item index_menu-item-4" data-page="4">
                    <span style="left: -18px;" class="index_menu-item-content"></span>
                </div>
                <div class="index_menu-item index_menu-item-5" data-page="5">
                    <span class="index_menu-item-content"></span>
                </div>
            </div>
            <div class="index_page index_page-1 active">
                <h2 class="index_page-heading">
                    <span class="index_page-heading-colored"></span>
                  </h2>
                <div class="index_user">
                </div>
                <div class="index_mess">
                    <ul class="index_ul">
                        
                    </ul>
                </div>                            
            </div>
            <div class="index_page index_page-2">
                <h2 class="index_page-heading">
                      <span class="index_page-heading-colored"></span>
                </h2>
                <ul class="index_ul2">
                    
                </ul>                
            </div>
            <div class="index_page index_page-3">
                <h2 class="index_page-heading">
                      <span class="index_page-heading-colored"></span>
                </h2>
                <div class="index_box">
                    <ul class="index_ul3">
                        
                    </ul>
                </div>
            </div>
            <div class="index_page index_page-4">
                <h2 class="index_page-heading">
                      <span class="index_page-heading-colored"></span>
                </h2>
                <ul class="index_ul4">
                    
                </ul>
            </div>
            <div class="index_page index_page-5">
                <h2 class="index_page-heading"></h2>
                <ul class="index_ul5">
                    
                </ul>
            </div>
        </div>
        
    </body>

</html>


*{
    margin: 0 auto;
}
html,body {
    height: 100%;
    overflow: hidden;    //
    width: 100%;
    min-width: 320px;
    min-height: 480px;
    font-family: "";
    background: -sharpfff;
    position: relative;
    -webkit-touch-callout: none;  
    -webkit-user-select: none;  
    -khtml-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;
} 
::-webkit-input-placeholder {
    color: -sharpB3B3B3;
}
a,input,p,div {
    -webkit-tap-highlight-color: rgba(0,0,0,0);   //
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
textarea { 
    resize: none; 
}
textarea, input {
    font-family: "";
}
.animated {
    animation-duration:200ms!important;
}
/*
 * css
 */
.top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    line-height: 50px;
    z-index: 999;
    text-align: center;
}
.top>em {
    font-size: 18px;
    color: -sharpfff;
}
content {
    position: absolute;
    top:50px;
    left:0;
    right: 0;
    bottom:0;
    z-index: 9;
    overflow: auto;
}
.index_content {
    z-index: 1;
    position: relative;
    height: 100%;
    background: -sharp103142;
    overflow: hidden;
    transition: all 0.3s;
}

.index_menu {
    position: absolute;
    left: 0;
    top: 24%;
}

.index_menu:after {
    z-index: -2;
    content: "";
    position: absolute;
    left: 0;
    top: -64px;
    width: 92px;
    height: 322px;
    -webkit-clip-path: polygon(0 0, 100% 53px, 100% 269px, 0 100%);
    clip-path: polygon(0 0, 100% 53px, 100% 269px, 0 100%);
    pointer-events: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    opacity: 0;
}

.index_menu.menu-active:after {
    z-index: 10;
    opacity: 1;
    -webkit-transition: all 0.3s 0.5s;
    transition: all 0.3s 0.5s;
}

.index_menu.page-active-1:after {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, transparent 10%, rgba(0, 0, 0, 0.45) 100%);
}

.index_menu.page-active-2:after {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
}

.index_menu.page-active-3:after {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.25) 0%, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
}

.index_menu.page-active-4:after {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.35) 0%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
}

.index_menu.page-active-5:after {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
    background: linear-gradient(rgba(0, 0, 0, 0.45) 0%, transparent 90%, rgba(0, 0, 0, 0.05) 100%);
}

.index_menu-item {
    z-index: -1;
    position: absolute;
    left: 0;
    width: 92px;
    height: 106px;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s, -webkit-clip-path 0.2s;
    opacity: 0;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}

.index_menu-item-1 {
    top: -64px;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.menu-active .index_menu-item-1 {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.index_menu-item-2 {
    top: -10px;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.menu-active .index_menu-item-2 {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.index_menu-item-3 {
    top: 44px;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.menu-active .index_menu-item-3 {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.index_menu-item-4 {
    top: 98px;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.menu-active .index_menu-item-4 {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.index_menu-item-5 {
    top: 152px;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.menu-active .index_menu-item-5 {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.index_menu-item:nth-child(even) {
    -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.index_menu-item:nth-child(even):after {
    -webkit-transform: translate3d(60px, 0, 0) rotate(90deg);
    transform: translate3d(60px, 0, 0) rotate(90deg);
}

.index_menu-item:nth-child(even) .index_menu-item-content {
    -webkit-transform: translate3d(60px, 0, 0);
    transform: translate3d(60px, 0, 0);
}

.index_menu-item-1 {
    -webkit-transform: translate(0, -140px);
    transform: translate(0, -140px);
}

.index_menu-item-2 {
    -webkit-transform: translate(20px, -220px);
    transform: translate(20px, -220px);
}

.index_menu-item-3 {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.index_menu-item-4 {
    -webkit-transform: translate(20px, 220px);
    transform: translate(20px, 220px);
}

.index_menu-item-5 {
    -webkit-transform: translate(0, 140px);
    transform: translate(0, 140px);
}

.menu-active .index_menu-item {
    z-index: 2;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    background-color: -sharp0299DC;
}

.index_menu-item:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
    width: 16px;
    height: 12px;
    background: -webkit-linear-gradient(-sharpfff 0, -sharpfff 2px, transparent 2px, transparent 5px, -sharpfff 5px, -sharpfff 7px, transparent 7px, transparent 10px, -sharpfff 10px, -sharpfff 100%);
    background: linear-gradient(-sharpfff 0, -sharpfff 2px, transparent 2px, transparent 5px, -sharpfff 5px, -sharpfff 7px, transparent 7px, transparent 10px, -sharpfff 10px, -sharpfff 100%);
    -webkit-transform: translate3d(20px, 0, 0) rotate(90deg);
    transform: translate3d(20px, 0, 0) rotate(90deg);
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: transform 0.7s, opacity 0.7s;
    transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
    -webkit-transition-delay: inherit;
    transition-delay: inherit;
    opacity: 0;
}

.index_menu-item-content {
    position: absolute;
    margin-top: -8px;
    left: 0;
    top: 50%;
    min-width: 16px;
    text-align: center;
    font-size: 16px;
    color: -sharpfff;
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: transform 0.7s, opacity 0.7s;
    transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
    -webkit-transition-delay: inherit;
    transition-delay: inherit;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
}

.m--btn .index_menu-item-content {
    -webkit-transform: translate3d(16px, 0, 0) rotate(-90deg);
    transform: translate3d(16px, 0, 0) rotate(-90deg);
    opacity: 0;
}

.index_menu-item.m--btn {
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
    width: 68px;
    height: 78px;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.index_menu-item.m--btn:after {
    -webkit-transform: translate3d(0.16rem, 0, 0);
    transform: translate3d(0.16rem, 0, 0);
    opacity: 1;
}

.index_page {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition: all 0.3s 0.3s ease-in-out, opacity 0.3s 0s ease-in-out;
    transition: all 0.3s 0.3s ease-in-out, opacity 0.3s 0s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 0;
    will-change: transform, opacity, filter;
}

.index_page.active {
    z-index: 1;
    opacity: 1;
}

.index_page.menu-active {
    -webkit-transform: scale(0.7) translate3d(30%, 0, 0);
    transform: scale(0.7) translate3d(30%, 0, 0);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-filter: blur(2px);
    filter: blur(2px);
    pointer-events: none;
}

.index_page-heading {
    margin: 0.48rem 0 0.05rem 0.22rem;
    font-size: 26px;
    color: -sharpfff;
}

.index_page-heading-colored {
    color: -sharp0299DC;
}

.index_user {
    overflow: hidden;
    color: -sharpfff;
    font-size: 13px;
    margin-left: 0.22rem;
}

.index_user img {
    float: left;
    width: 36px;
    margin-right: 10px;
}

.index_user p {
    height: 20px;
}

.index_user b {
    float: left;
    height: 20px;
    line-height: 14px;
}

.index_mess {
    position: absolute;
    top: 0.2rem;
    bottom: 0;
    width: 100%;
    padding: 62% 0.1rem 0.50rem 0.1rem;
    box-sizing: border-box;                
    font-size: 13px;
    background: rgba(2, 153, 220, .2);
    -webkit-clip-path: polygon(0% 36%, 100% 2%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 36%, 100% 2%, 100% 100%, 0% 100%);
}

.index_ul {
    overflow: auto;
    height: 100%;
}
.index_ul2 {
    position: absolute;
    top: 1.4rem;
    bottom: 0.55rem;
    width: 100%;
    padding-left: 0.72rem;
    box-sizing: border-box;
    overflow: auto;
    z-index: 9;
    font-size: 13px;
}
.index_box {
    position: absolute;
    top: 1.3rem;
    bottom: 0.55rem;
    width: 100%;
    padding-left: 0.72rem;
    box-sizing: border-box;
    overflow: auto;
    z-index: 9;
}

.index_box>p {
    line-height: 30px;
    font-size: 16px;
    color: -sharpfff;
}

.index_ul3 {
    overflow: hidden;
    font-size: 13px;
}

.index_ul4 {
    position: absolute;
    top: 1.4rem;
    bottom: 0.05rem;
    width: 100%;
    padding-left: 0.72rem;
    box-sizing: border-box;
    overflow: auto;
    z-index: 9;
    font-size: 13px;
}

.index_ul5 {
    position: absolute;
    top: 1.6rem;
    width: 100%;
    padding-left: 1.0rem;
    box-sizing: border-box;
    overflow: auto;
    z-index: 9;
    font-size: 13px;
}



$(document).ready(function() {

    var animating = false;

    function menuToggle() {
        $(".index_page, .index_menu").toggleClass("menu-active");
        $(".js-menuBtn").toggleClass("m--btn");
        $(document).off("click", ".index_content", closeNotFocusedMenu);    
    };

    function closeNotFocusedMenu(e) {
        if(!$(e.target).closest(".index_menu").length) {
            menuToggle();
            $(document).off("click", ".index_content", closeNotFocusedMenu);
        }
    };

    $(document).on("click", ".js-menuBtn", function() {
        if(animating) return;
        menuToggle();
        $(document).on("click", ".index_content", closeNotFocusedMenu);
    });

    $(document).on("click", ".index_menu-item:not(.js-menuBtn)", function() {
        animating = true;
        var $this = $(this);
        var page = +$this.data("page");
        $(".js-menuBtn").removeClass("js-menuBtn");
        $(".index_page.active").removeClass("active");
        $this.addClass("js-menuBtn m--btn");
        $(".index_page-" + page).addClass("active");
        $(".index_page, .index_menu").removeClass("menu-active");
        $(document).off("click", ".index_content", closeNotFocusedMenu);
        setTimeout(function() {
            $(".index_menu")[0].className = $(".index_menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
            $(".index_menu").addClass("page-active-" + page);
            animating = false;
        }, 1000);
    });

});

Please take a look at it, thank you!