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