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

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!

Animation css html5
Feb.28,2021

Previous: What does the zlib.compress () method return in Python 3.x?

Next: Communicate with the front and back end of websocket, and the back end sends 64-bit binary to the front end. How does the front end change the binary to the long type defined in the back-end service?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb1404-2345.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb1404-2345.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?