提示信息淡入淡出

本文实现类似安卓系统中消息的淡出效果。有时候，如果每次看到系统消息都要点击确定按钮才能关闭系统弹框，那么用户会觉得很烦躁，但是，如果系统弹框出现一段时间后自动淡出消失，即满足了提示用户的要求，有方便了用户不需要做任何操作就可以继续使用页面。

本文将会实现以下两种样式的提示消息淡出效果：

html文件（index.html）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>提示信息淡入淡出</title>
	<style type="text/css">
	body{
		padding: 0;
		margin: 0;
	}
	button{
		display: block;
		margin: 20px 10px;
	    width: 100px;
	    height: 30px;
	    position: relative;
	    z-index: 9;
	}
	.wrap{
		position: fixed;
		bottom: 110px;
		left: 0;
		right: 0;
		max-width: 600px;
		margin: 0 auto;
		text-align: center;
		min-height: 30px;
	}
	.tipWrap{
		background-color: rgba(0,0,0,.6);
		color: #fff;
		font-size: 14px;
		line-height: 14px;
		padding: 8px 10px;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-block;
		word-break: break-all;
	}
	.ulWrap{
		list-style-type: none;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		color: black;
		font-size: 12px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		max-width: 600px;
	}
	.liWrap{
		padding: 10px 15px;
		margin: 0;
		background-color: #ccc;
		border-bottom: 1px solid #fff;
	}
	</style>
</head>
<body>
	
	<!-- <div class='wrap' id='tips' >
		<div class='tipWrap'>
			提示信息
		</div>
	</div> -->
	<button onclick="fadeOutTips('提示信息样式1')">提示信息样式1</button>
	<button onclick="fadeOutMessageAdd('提示信息样式2')">提示信息样式2</button>
	<script type="text/javascript">

	function fadeOutTips(text){
		if( document.getElementById('tips') ){
			return;
		}
		document.body.insertAdjacentHTML("beforeend",'<div id="tips" class="wrap"></div>');
		var targetDom = document.getElementById('tips');
		targetDom.insertAdjacentHTML("beforeend",'<div class="tipWrap">'+text+'</div>');
		targetDom.style.opacity = '1';
		setTimeout(function(){
			targetDom.style.transition = 'opacity 2s';
			targetDom.style.opacity = '0';
			setTimeout(function(){
				targetDom.parentNode.removeChild(targetDom);
			},2000);
		},1000);
	}


	document.body.insertAdjacentHTML("beforeend",'<ul id="tipDialog" class="ulWrap"></ul>');
	var tipDialog = document.getElementById('tipDialog');

	function fadeOutMessageAdd(text){
		tipDialog.insertAdjacentHTML("beforeend",'<li class="liWrap">'+text+'</li>');
		if( tipDialog.querySelectorAll("li").length > 1 ){
			return;
		}
		function next(){
			var targetDom = tipDialog.querySelectorAll('li')[0];
			if( tipDialog.querySelectorAll("li").length == 0 ){
				return;
			}
			targetDom.style.opacity = '1';
			setTimeout(function(){
				targetDom.style.transition = 'opacity 2s';
				targetDom.style.opacity = '0';
				setTimeout(function(){
					targetDom.parentNode.removeChild(targetDom);
					next();
				},2000);
			},1000);
		}
		next();
	}


	</script>
</body>
</html>