api
Object.prototype.toString.call()
獲取對(duì)象的類型
document.querySelector()
返回當(dāng)前文檔中第一個(gè)匹配特定選擇器的元素
document.querySelectorAll()
返回當(dāng)前文檔中匹配一個(gè)特定選擇器的所有的元素
document.createElement()
創(chuàng)建指定的HTML元素
document.body.appendChild()
將一個(gè)節(jié)點(diǎn)插入到指定的父節(jié)點(diǎn)（body）的最末尾處
element.className
element.classList
element.innerHTML
element.addEventListener
略
原理
該彈出框主要有背景mask和對(duì)話框container組成坷檩。mask是一個(gè)置于最底層覆蓋全屏的背景折晦，初識(shí)z-index為-1。而container初始display為none俘枫，并不在dom樹里褥伴，z-index為101谅将。當(dāng)觸發(fā)彈出時(shí)，mask的z-index設(shè)置為100重慢，而container插入dom樹后并附加一個(gè)0.3s的下方彈出位移動(dòng)畫饥臂。
創(chuàng)建mask并添加到dom
先判斷dom樹是否存在mask，不存在則生成mask
if (!!document.querySelectorAll('.vux-popup-mask').length <= 0) {
this.divMask = document.createElement('a')
this.divMask.className = 'vux-popup-mask'
this.divMask.href = 'javascript:void(0)'
document.body.appendChild(this.divMask)
}
this.mask = document.querySelector('.vux-popup-mask')
mask css
.vux-popup-mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
tap-highlight-color: rgba(0,0,0,0);
z-index: -1;
}
創(chuàng)建container并添加到dom
let div
if (!option.container) {
div = document.createElement('div')
} else {
div = option.container
}
div.className = 'vux-popup-dialog'
if (!option.container) {
document.body.appendChild(div)
}
this.container = document.querySelectorAll('.vux-popup-dialog')
this.container = this.container[this.container.length - 1]
this._bindEvents()
dialog css定義了transition-property（動(dòng)畫對(duì)哪個(gè)屬性的改變起作用）和transition-duration（動(dòng)畫時(shí)長(zhǎng)）
.vux-popup-dialog {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #eee;
z-index: 101;
transition-property: transform;
transition-duration: 300ms;
}
動(dòng)畫屬性
上面的css雖然定義了transition-property（動(dòng)畫對(duì)哪個(gè)屬性的改變起作用）和transition-duration（動(dòng)畫時(shí)長(zhǎng)）似踱，但是還有動(dòng)畫的具體動(dòng)作還沒定義隅熙。
因?yàn)轫?xiàng)目使用vue關(guān)系，這里使用vue的代碼說明核芽，但原理共通囚戚。下面的語(yǔ)句定義了動(dòng)作在display改變時(shí)觸發(fā)形變，形變從下方彈入和下方彈出轧简。
如果是非vue項(xiàng)目驰坊，只要在display改變前手動(dòng)添加以下css然后在display改變后移除如下css便可達(dá)到觸發(fā)transform。
.vux-popup-enter {
transform: translate3d(0, 100%, 0);
}
.vux-popup-leave {
transform: translate3d(0, 100%, 0);
}
結(jié)語(yǔ)
謝謝收看哮独。
