目標
在html頁面中捏境，往往需要彈窗于游。
新手的做法是，搞一個div垫言，css的display屬性初始化設(shè)置為display=none,等某個事件觸發(fā)后贰剥，動態(tài)改變display屬性，設(shè)置display=block筷频。div窗口便可以在設(shè)定好的位置顯示出來蚌成。
今天，本人想實現(xiàn)讓窗口從某一中心點開始凛捏， 以動畫的形式担忧，從小到大的顯示。如下圖：
概念
知識點
首先必須明白一個知識點坯癣，即當元素設(shè)置了css的transition屬性后瓶盛，一旦元素的css樣式變化了，瀏覽器會自動地根據(jù)樣式屬性值的變化示罗，自行執(zhí)行過渡動畫惩猫。 這一點是瀏覽器默認實現(xiàn)的。
關(guān)鍵點
因此要目標那樣的效果蚜点，有三個關(guān)鍵點帆锋。
- 元素要有兩種不同狀態(tài)的樣式
- 初始樣式要設(shè)置transition屬性，指定針對那種屬性變化執(zhí)行過渡效果
- 動態(tài)改變要素的樣式
遇到的問題
根據(jù)上述關(guān)鍵點锯厢，針對一個div先創(chuàng)建兩種狀態(tài)的樣式脯倒，即初始樣式和變化后的樣式
<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>
通過代碼動態(tài)改變樣式藻丢，瀏覽器根據(jù)transition屬性，自動執(zhí)行過渡動畫残黑。
document.getElementsByClassName('rectangle')[0].setAttribute('class', 'rectangle show');
第一個問題
初始樣式斋否，希望元素不可見，使用display:none屬性疫诽。發(fā)現(xiàn)過渡動畫不執(zhí)行奇徒。
<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也就自然不響應(yīng)了匀钧。
解決方案：考慮使用透明度解決。
初始透明度為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相對于瀏覽器底部進行定位鹿鳖。
實踐發(fā)現(xiàn)壮莹，讓div既相對底部定位，又居中展示并不好實現(xiàn)涝滴。于是考慮使用嵌套div的方式實現(xiàn)胶台。
外部div實現(xiàn)相對定位诈唬，內(nèi)部元素實現(xiàn)居中。(又一個知識點)
<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>
至此骤素，本文開頭設(shè)置的目標可完成济竹。
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>
