css3从下往上展开显示效果

最新推荐文章于 2023-03-14 15:34:33 发布

说学逗唱攻城狮

最新推荐文章于 2023-03-14 15:34:33 发布

阅读量4.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34720531/article/details/103984629

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一个简单的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>

说学逗唱攻城狮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3从下往上展开显示效果

一个简单的css3从下往上显示效果，想要的这种感觉的效果一直没找到，自己写了一个记录一下，也方便以后需要直接拿过来使用。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maxi...
复制链接

扫一扫

专栏目录