请问如何解决代码引起的移动端动画卡顿问题？

分类：HTML5+

css

劳烦各位自己引用一下jquery.js，运行一下代码，小米手机上还行，华为魅族和vivo上有明显卡顿，iphoneSE可以，iphone6s有明显卡顿，还有一些没有测试到的机型想必都有这种问题存在，不知道问题出在哪，大家帮忙看看，谢谢！


<!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, #2d4959 0%, #101821 100%);  
                background: radial-gradient(circle, #2d4959 0%, #101821 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>

2018-04-08 09:50 负责人:无分享

2 个回复

生生不息的bug (作者)


*{  
    margin: 0 auto;  
}  
html,body {  
    height: 100%;  
    overflow: hidden;    //禁止页面滑动  
    width: 100%;  
    min-width: 320px;  
    min-height: 480px;  
    font-family: "微软雅黑";  
    background: #fff;  
    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: #B3B3B3;  
}  
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: #fff;  
}  
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: #103142;  
    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: #0299DC;  
}  

.index_menu-item:after {  
    content: "";  
    position: absolute;  
    left: 0;  
    top: 50%;  
    margin-top: -6px;  
    width: 16px;  
    height: 12px;  
    background: -webkit-linear-gradient(#fff 0, #fff 2px, transparent 2px, transparent 5px, #fff 5px, #fff 7px, transparent 7px, transparent 10px, #fff 10px, #fff 100%);  
    background: linear-gradient(#fff 0, #fff 2px, transparent 2px, transparent 5px, #fff 5px, #fff 7px, transparent 7px, transparent 10px, #fff 10px, #fff 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: #fff;  
    -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: #fff;  
}  

.index_page-heading-colored {  
    color: #0299DC;  
}  

.index_user {  
    overflow: hidden;  
    color: #fff;  
    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: #fff;  
}  

.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;  
}

生生不息的bug (作者)


$(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");  
        $("." + 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-" + page);  
            animating = false;  
        }, 1000);  
    });  

});

该问题目前已经被锁定, 无法添加新回复

请问如何解决代码引起的移动端动画卡顿问题？

2 个回复

公告

相关问题

请问如何解决代码引起的移动端动画卡顿问题？

与内容相关的链接

2 个回复

公告

相关问题