看了几个前端移动框架，发现各有各的优点，但现在看来都不好意思说自己是移动端不用框架了。 事实上，事实并非如此。 由于刚开始做移动端，所以暂时没有使用框架。 但有时候我会在框架的框架里写几个需要的组件，比如这样：
由于只需要框架的几个功能，为了节省流量和优化网页加载，不需要引入整个框架，只需实现功能即可。
本文介绍如何实现阿里开源SUI框架的操作表。
喜欢阅读原文 1. 基本思想 1.1 概述
当用户点击一些删除、添加、修改等操作按钮时，为了防止用户出错，往往需要用户再次确认，以防止用户的重要信息被误操作。 移动端体验效果比较好的就是这样一个操作列表，从屏幕底部滑出显示，取消时“一路返回”。 屏幕下方应该是方便操作的，毕竟是移动终端，拇指方便操作。
1.3 js设计原理
点击显示，点击取消再次隐藏。 在PC端很容易实现，在移动端也是如此。 需要注意的是，遮罩层和操作表（操作表就是出现的操作区域）是分开的，分别放在html标签中。 它们之间不存在嵌套关系。 操作台出现的方式是淡入、向上滑动移动端网页用什么框架
，隐藏的方式是淡出、向下滑动。 这里最好的办法就是实现CSS3动画，这样也没有什么问题。贴出代码，一一介绍
2. 代码
<meta charset="UTF-8">
Document
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="xx,xx,xx" />
<meta name="description" content="yyyyyyy" />
<script src="./js/rem.js"></script>
<script src="./js/jquery-1.11.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
background: rgba(0, 0, 0, 0.6);
display: none;
}
.wrap {
width: 99%;
height: 7rem;
position: fixed;
bottom: 2px;
left: 0.5%;
right: 0;
z-index: 10;
background: #FFF;
border-radius: 5px;
display: none;
}
.wrap div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
border-top: 1px solid #333;
}
.wrap .div-title {
width: 100%;
height: 3rem;
text-align: center;
line-height: 3rem;
}
.wrap .div-btn {
width: 100%;
height: 2rem;
text-align: center;
line-height: 2rem;
}
.pass {
background: green;
color: aliceblue;
}
.close {
background: red;
color: aliceblue;
}
/* 预设动画*/
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
</style>
<body>
您确定要删除我么？
确认
取消
<script>
//点击按钮，遮罩层先出现，淡出淡入在视觉上好一些，操作表向上滑动出现
$('.haha').bind('click', function() {
$('#mask').fadeIn();
//操作表向上滑动出现,先显示操作表（display:block），移除预设动画类'fadeOutDown',再添加预设动画类’fadeInUp‘
$('.wrap').show().removeClass('fadeOutDown').addClass('fadeInUp');
});
//点击取消按钮，操作表向下滑动隐藏，‘delay(500)’可以防止操作表在视觉上还没向下滑动就隐藏掉的问题，
$('.close').bind('click', function() {
//操作表向下滑动隐藏,先移除预设动画类'fadeInUp',再添加预设动画类’fadeOutDown‘，最后隐藏操作表（display:none），
$('.wrap').removeClass('fadeInUp').addClass('fadeOutDown').delay(500).hide(0);
//然后遮罩层晚操作表隐藏
$('#mask').fadeOut();
})
//（’display:block‘和’display:none‘只做说明）
</script>