当前位置： 文江博客话题详情

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

发布于 2022-09-06 22:15:07 字数 16141 浏览 15 评论 0

劳烦各位自己引用一下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>


*{
    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;
}



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

});

请大家帮忙看一下，谢谢了！

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

得不到的就毁灭

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文