目标
在html页面中，往往需要弹窗。
新手的做法是，搞一个div，css的display属性初始化设置为display=none,等某个事件触发后，动态改变display属性，设置display=block。div窗口便可以在设定好的位置显示出来。
今天，本人想实现让窗口从某一中心点开始， 以动画的形式，从小到大的显示。如下图：
2.gif
概念
知识点
首先必须明白一个知识点，即当元素设置了css的transition属性后，一旦元素的css样式变化了，浏览器会自动地根据样式属性值的变化，自行执行过渡动画。 这一点是浏览器默认实现的。
关键点
因此要目标那样的效果，有三个关键点。
- 元素要有两种不同状态的样式
- 初始样式要设置transition属性，指定针对那种属性变化执行过渡效果
- 动态改变要素的样式
遇到的问题
根据上述关键点，针对一个div先创建两种状态的样式，即初始样式和变化后的样式
<div class="rectangle">
</div>
<style>
.rectangle{
width: 10px;
height: 10px;
border: 1px solid black;
background: red;
margin: 0 auto;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
}
.rectangle.show{
width: 400px;
height: 100px;
}
</style>
通过代码动态改变样式，浏览器根据transition属性，自动执行过渡动画。
document.getElementsByClassName('rectangle')[0].setAttribute('class', 'rectangle show');
第一个问题
初始样式，希望元素不可见，使用display:none属性。发现过渡动画不执行。
<div class="rectangle">
</div>
<style>
.rectangle{
width: 10px;
height: 10px;
border: 1px solid black;
background: red;
margin: 0 auto;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
display:none;
}
.rectangle.show{
width: 400px;
height: 100px;
display:block;
}
</style>
原因，transition针对display:none的元素样式不处理，直接使用新的样式。transition也就自然不响应了。
解决方案：考虑使用透明度解决。
初始透明度为0. 变化后的透明度为1.
.rectangle{
width: 10px;
height: 10px;
border: 1px solid black;
background: red;
margin: 0 auto;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
opacity: 0;
}
.rectangle.show{
width: 400px;
height: 100px;
opacity: 1;
}
第二个问题
目前为止div过渡，都是从上往下变大的。因为div元素绘制的原点是在屏幕左上角。 如何才能从下往上过渡呢。
考虑改变div的position，让div相对于浏览器底部进行定位。
实践发现，让div既相对底部定位，又居中展示并不好实现。于是考虑使用嵌套div的方式实现。
外部div实现相对定位，内部元素实现居中。(又一个知识点)
<div class="parent_container">
<div class="rectangle" ></div>
</div>
<style>
.parent_container{
width: 100%;
position: fixed;
bottom: 10px;
}
.rectangle{
width: 10px;
height: 10px;
border: 1px solid black;
background: red;
margin: 0 auto;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
opacity: 1;
}
</style>
至此，本文开头设置的目标可完成。
Show Me Code
<html>
<meta charset="utf-8">
<body>
<div class="parent_container">
<div class="rectangle" >
</div>
</div>
<button onclick="changeStyle()">click</button>
<script>
function changeStyle(){
document.getElementsByClassName('rectangle')[0].setAttribute('class', 'rectangle show');
}
</script>
<style>
.parent_container{
width: 100%;
position: fixed;
bottom: 10px;
}
.rectangle{
width: 0px;
height: 0px;
border: 1px solid black;
background: red;
margin: 0 auto;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
.rectangle.show{
width: 400px;
height: 100px;
opacity: 1;
}
</style>
</body>
</html>
网友评论