H5實現彈窗從下邊彈出、關閉效果

  

JS代碼中：

/*
   *  打開分享微信彈窗
   */
  function openDialog () {
     visible = true; var dialogDom = document.getElementById('dialog') dialogDom.style.display = 'flex' dialogDom.style['animation'] = 'fromBottom 0.5s linear'; } /* * 關閉微信分享彈窗 */ var visible = true; function closeDialog () { visible = false; var dialogDom = document.getElementById('dialog') dialogDom.style['animation'] = 'toBottom 0.5s linear'; dialogDom.addEventListener("animationend",function(e){ if(!visible) dialogDom.style['display'] = 'none'; },false); }

CSS中：

@keyframes fromBottom{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0%);
  }
}
@keyframes toBottom{
  0%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(100%);
  }
}
.dialog{
  width: 100%;
  height: 160px;
  background-color: white;
  position: absolute;
  bottom: 0px;
  z-index: 10;
  display: none;
  flex-direction: row;
  justify-content: center;
}