js 结合 css3 实现简单 toast 效果

效果：点击按钮，提示信息过渡1s出现，然后过渡一秒自动消失，居中显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>
		.show-msg {
			opacity:0;
			transition: all 1s;
		}
		.msg {
			font-size: 18px;
			color: #fff;
			background-color: rgba(0,0,0,.6);
			padding:10px 15px;
			margin:50px auto;
			border-radius: 4px;
		}
	</style>
</head>
<body>
<button class="btn">btn</button>
<div class="show-msg">
	<p class="msg"></p>
</div>
	<script>
	var msgDom = document.querySelector('.msg')
	var btn = document.querySelector('.btn')
	var showMsg = document.querySelector('.show-msg')
		function show (msg) {
			msgDom.innerHTML = msg
			showMsg.style.display = 'flex'
			showMsg.style.opacity = '1'
			setTimeout(function(){
				showMsg.style.opacity = '0'
			},1000)
		}
		btn.addEventListener('click',function() {
			show('good')
		},false)
	</script>
</body>
</html>
posted @ 2017-09-19 10:27  wmui  阅读(1058)  评论(0)    收藏  举报