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

我辈岂是一凡人 2018-03-30 10:30:21 


<!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>
...全文
1061 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
我辈岂是一凡人 2018-03-30
  • 打赏
  • 举报
 回复 


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

});
我辈岂是一凡人 2018-03-30
  • 打赏
  • 举报
 回复 

*{
	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;
}
我辈岂是一凡人 2018-03-30
  • 打赏
  • 举报
 回复
劳烦各位自己引用一下jquery.js，运行一下代码，小米手机上还行，华为魅族和vivo上有明显卡顿，iphoneSE可以，iphone6s有明显卡顿，还有一些没有测试到的机型想必都有这种问题存在，不知道问题出在哪，大家帮忙看看，谢谢！
Unity高性能、自动化UI框架(ZMUIFrameWork)
高性能系统 (负责Untiy UGUI相关极致的性能优化，彻底解决UI卡顿、不流畅的问题) 6.自动化系统 (提供代码查找、组件自动绑定、字段、方法、事件接口声明、UI组件事件绑定、脚本生成等一条龙服务) 7.高效率系统 (提供...
css3动画 安卓卡顿解决方案
公司有个H5项目，采用 的CSS3动画制作。...下面附上解决办法：开启硬件加速。。。在webkit中有神奇效果：opacity: 1;或者-webkit-backface-visibility: hidden;*{-webkit-backface-visibility: hidden;}
HTML页面在ios上滚动卡顿的解决方案
最近在做移动端的项目，然后同样的代码在Ios上，滚动的时候就出现卡顿的问题，不是很流畅，一开始以为是代码的兼容性问题， 后面同事帮我分析了，说可能是外层的样式有问题，然后就就在网上百度了，下面附上解决方案...
CSS3 动画卡顿性能优化解决方案
所以这又触碰到了我的知识盲区，不过项目在磕磕绊绊中完成的差不多了，但是遇到了CSS3动画渲染的性能问题，所以我也是被逼的，再回过头来从浏览器渲染网页的流程出发，去找动画卡顿的症结。 浏览器渲染网页的流程...
移动端分页上滑加载瀑布流简易方案
上滑加载是移动端瀑布流的常用加载方式，实现方式还是非常简单的，没必要借助插件。 一般都需要配合图片懒加载等优化方式一同使用，这里附上：，不用监听scroll事件就可以实现懒加载，很好的优化页面性能。
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章