手动实现移动端确认框（阿里开源的SUI Mobile框架的操作表）
翻看几个前端的移动框架，发现各有千秋，不过现在好像不用框架都不好意思说自己是做移动端的。其实不然，个人在移动端由于刚刚起步，暂时没用上框架。不过有时候我会仿照框架写几个需要的组件，比如说这个：
由于只是需要框架的几个功能，为了节省流量，优化网页加载，所以不需要把整个框架引入，简单把功能实现。
本文就介绍一下怎样实现阿里开源的SUI Mobile框架的操作表，点击查看原版
原文
1.基本思路
1.1 概述
用户点击某些操作按钮，比如，删除、添加、修改时，为了防止用户操作错误，往往需要用户再次进行确认，防止用户重要信息被误操作。移动端比较好的体验效果就是这样的操作单，从在屏幕下方滑出显示，取消时”沿路返回“。在屏幕下方是应为操作方便，毕竟是移动端，大拇指很容易操作到。
1.3 js设计原理
点击出现，点击取消再次隐藏，PC端很容易实现，移动端一样；需要说明的是这里的遮罩层和操作单（操作单就是出现的那块操作区）都是单独，单独放在html标签之间，没有嵌套关系。操作表的出现方式是淡入向上滑动，隐藏方式是淡出向下滑动，这里最好的办法就是CSS3动画实现，没毛病。
贴上代码，一一介绍
2.代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
| <!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，要预先添加’animaied‘，再添加相应的动画类，比如’fadeInUp‘
这样以后就可以随意使用动画了，像这样的：
animate.css实际项目使用
4、在线演示
在线演示
