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