CSS3 animation-- 写一个带有回弹效果的模态对话框----1

这篇文章写法有问题，有空的时候会重新更新

据说大师的成长的路线是这样的：

follow the rule    >>>>>>break the rule >>>>>>>be the rule

而作为前端小白，当然第一步就是空闲的时候多练习造轮子了。

一般来说弹出层都要解决2个问题：

   1.弹出层后，禁用html和body滚动

   2.入场动画的制作

我们先看一下效果图：

1.HTML 页面

<div class="main-container grid">

			<div class="box">
				弹出对话框
			</div>
		</div>

		<div class="dialogue-mask">
			<div class="dialogue-container">
				<div class="dialogue-title border-bottom">
					对话框标题
				</div>

				<div class="dialogue-content border-bottom">
					这里是对话框内容，比如:你确定要提交调查信息吗？
				</div>

				<div class="dialogue-btn clear-float">
					<div class="dialogue-sure">
						确认
					</div>

					<div class="dialogue-cancel">
						取消
					</div>
				</div>
			</div>
		</div>

2.CSS样式

.grid{
	background-image:-webkit-linear-gradient(top,
					transparent 49px,
					#bfbebe 50px),
					-webkit-linear-gradient(left,
					transparent 49px,
					#bfbebe 50px);

	background-size:50px 50px;
	background-repeat:repeat;                     /*先画个网格，便于布局*/
}

/*主容器*/
.main-container{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:1000px;
}

/*BOX*/
.box{
	width:100px;
	height:50px;
	background-color:grey;
	margin:100px;
	position:relative;
	color:white;
	text-align:center;
	line-height:50px;
}

.box-style{
/*	margin-top:10px;
	transition-property:margin-top;
	transition-duration:2s;
	transition-timing-function: ease-out;
	transition-delay:0;*/
	width:200px;
	height:100px;
	transition:width 1s ease-in-out,height 4s 1s ease-out;
}

/**/
.good-noon{
	position:relative;
	width:100px;
	height:50px;
	border:1px solid black;
	/*-webkit-animation:demo 10s;*/
	-webkit-animation-name:demo;
	-webkit-animation-duration:2s;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:alternate;
	-webkit-animation-fill-mode:backwards;
}

@-webkit-keyframes demo{
	0% {left:0;background-color:white;}
	50% {left:200px;background-color:yellow;}
	100% {left:0px;background-color:red;}
}

/**/
div{
	box-sizing:border-box;
}

.dialogue-mask{
	position:absolute;                        /*弹出层*/
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(128,128,128,0.5);
	display:none;
	overflow:auto;
}



.dialogue-container{
	position:absolute;
	width:80%;
	left:50%;
	top:40%;
	box-sizing:border-box;
	-webkit-transform:translate(-50%,-50%);
	background-color:white;
	box-shadow: 1px 1px 1px 1px #cdcfda;
    border-radius: 10px;
    padding:15px;
    display:block;
    z-index:2;
}

.dialogue-title{
	font-size:16px;
	font-weight:bold;
	line-height:30px;
	position:relative;
}

.border-bottom::after{
	content:"";
	width:100%;
	height:1px;
	position:absolute;
	bottom:0;
	left:0;
	background-color:#b9b9b9;
	-webkit-transform:scaleY(0.5);

}

.dialogue-content{
	font-size:14px;
	line-height:25px;
	position:relative;
}

.dialogue-btn{
	margin-top:10px;
}

.clear-float::after{
	content:"";
	display:block;
	clear:both;
}

.dialogue-cancel{
	float:right;
	margin-right:20px;
	padding: 8px 25px;
	color:grey;
	background-color:white;
	border-radius:3px;
	border:1px solid #e2e1e1;
}

.dialogue-sure{
	float:right;
	padding: 8px 25px;
	color:white;
	background-color:#229ffd;
	border-radius:3px;
}


@-webkit-keyframes dialogue-in{
	0% {top:0;}
	50% {top:40%;}
	90% {top:37%;}
	100% {top:40%;}
}

.animation-dialogue-in{
	display:block;

	-webkit-animation:dialogue-in 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}


/*隐藏滚动条*/
.forbid-scroll{
	height:100%;
	overflow:hidden;
}

3.JS

$(".box").click(function(){
	$(".dialogue-mask").show();
	$(".dialogue-container").addClass("animation-dialogue-in");
	$("body,html").addClass("forbid-scroll");//弹出层后，禁用body和html滚动

});


$(".dialogue-cancel").click(function(){
	$(".dialogue-mask").hide();
	$(".dialogue-container").removeClass("animation-dialogue-in");
	$("body,html").removeClass("forbid-scroll");
})

$(".dialogue-sure").click(function(){
	console.log("You have clicked the sure button");
});