一个简单的css3从下往上显示效果,想要的这种感觉的效果一直没找到,自己写了一个记录一下,也方便以后需要直接拿过来使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style>
.x-popup {
opacity: 0;
visibility: hidden;
-webkit-transition-duration: .3s;
transition-duration: .3s;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 501;
background: rgba(0,0,0,.4);
}
.x-visible {
opacity: 1;
visibility: visible;
}
.x-sheetList {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
overflow-y: auto;
z-index: 502;
background: #FFFFFF;
}
.x-show {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
</style>
</head>
<body>
<div class="x-actionSheet">
<a href="javascript:;" id="showPop" >显示</a>
</div>
<div class="x-popup" id="popup"></div>
<div class="x-sheetList" id="sheetList">
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>天字第一号</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<p>玄字第一号</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<p>玄字第一号</p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<p>玄字第一号</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
var _popup = $('#popup');
var _sheetList = $('#sheetList');
var _visible = 'x-visible';
var _show = 'x-show';
function _hidden(removeAdd) {
// 调用方法判断传过来的值 是显示还是隐藏
if (removeAdd == 'addClass') {
_popup.addClass(_visible);
_sheetList.addClass(_show);
} else if(removeAdd == 'removeClass') {
_popup.removeClass(_visible);
_sheetList.removeClass(_show);
}
}
// 显示隐藏
$('#showPop').on('click', function() {
_hidden ('addClass');
});
$('#popup').on('click', function() {
_hidden('removeClass');
});
$('#sheetList .weui-cell').on('click', function() {
_hidden('removeClass');
});
</script>
</body>
</html>