翻看几个前端的移动框架，发现各有千秋，不过现在好像不用框架都不好意思说自己是做移动端的。其实不然，个人在移动端由于刚刚起步，暂时没用上框架。不过有时候我会仿照框架写几个需要的组件，比如说这个：
由于只是需要框架的几个功能，为了节省流量，优化网页加载，所以不需要把整个框架引入，简单把功能实现。
本文就介绍一下怎样实现阿里开源的SUI Mobile框架的操作表，点击查看原版
喜欢的来原文看看
1.基本思路
1.1 概述
用户点击某些操作按钮，比如，删除、添加、修改时，为了防止用户操作错误，往往需要用户再次进行确认，防止用户重要信息被误操作。移动端比较好的体验效果就是这样的操作单，从在屏幕下方滑出显示，取消时”沿路返回“。在屏幕下方是应为操作方便，毕竟是移动端，大拇指很容易操作到。
1.3 js设计原理
点击出现，点击取消再次隐藏，PC端很容易实现，移动端一样；需要说明的是这里的遮罩层和操作单（操作单就是出现的那块操作区）都是单独，单独放在html标签之间，没有嵌套关系。操作表的出现方式是淡入向上滑动，隐藏方式是淡出向下滑动，这里最好的办法就是CSS3动画实现，没毛病。
贴上代码，一一介绍
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 使用rem作布局方式时，视口的设置很有必要-->
<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/faskclick.js"></script>-->
<!-- 引入自己封装的rem.js文件-->
<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>
</head>
<body>
<button class="haha">点击</button>
<div class="mask" id="mask"></div>
<div class="wrap animated">
<div class="div-title">您确定要删除我么？</div>
<div class="div-btn pass">确认</div>
<div class="div-btn close">取消</div>
</div>
<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>
</body>
</html>
3、补充说明
对于动画的实现，自己做也是没问图，博主比较懒，拿现成的省时省力。大家应该都知道animate.css.你可以选择全部拿下来整个引用。怕冗余代码多的话，我教你拿出你需要的代码。
1.确定你需要的效果，博主需要淡入向上滑动，和淡出向下滑动，如下
2.然后下载下来整个animate.css类库文件，打开找到相应的类名fadeInUp、fadeOutDown
3.复制粘贴出来，放在自己的css文件中，还没完，必须把’animated‘类也拿出来，放在动画代码的前面（必须）
4.需要动画的div，要预先添加’animated‘，再添加相应的动画类，比如’fadeInUp‘
这样以后就可以随意使用动画了
网友评论