javascript制作下方弹出对话框

7月-06-2016 16-25-09.gif

api

---

Object.prototype.toString.call()

获取对象的类型

document.querySelector()

返回当前文档中第一个匹配特定选择器的元素

document.querySelectorAll()

返回当前文档中匹配一个特定选择器的所有的元素

document.createElement()

创建指定的HTML元素

document.body.appendChild()

将一个节点插入到指定的父节点（body）的最末尾处

element.className

element.classList

element.innerHTML

element.addEventListener

略

原理

---

该弹出框主要有背景mask和对话框container组成。mask是一个置于最底层覆盖全屏的背景，初识z-index为-1。而container初始display为none，并不在dom树里，z-index为101。当触发弹出时，mask的z-index设置为100，而container插入dom树后并附加一个0.3s的下方弹出位移动画。

创建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;
}

创建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（动画对哪个属性的改变起作用）和transition-duration（动画时长）

.vux-popup-dialog {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #eee;
  z-index: 101;
  transition-property: transform;
  transition-duration: 300ms;
}

动画属性

上面的css虽然定义了transition-property（动画对哪个属性的改变起作用）和transition-duration（动画时长），但是还有动画的具体动作还没定义。
因为项目使用vue关系，这里使用vue的代码说明，但原理共通。下面的语句定义了动作在display改变时触发形变，形变从下方弹入和下方弹出。
如果是非vue项目，只要在display改变前手动添加以下css然后在display改变后移除如下css便可达到触发transform。

.vux-popup-enter {
  transform: translate3d(0, 100%, 0);
}
.vux-popup-leave {
  transform: translate3d(0, 100%, 0);
}

结语

谢谢收看。