transition与visibility实现底部浮层效果实例页面

展示

代码

• HTML：

  <div id="popup" class="popup">
      <div class="content">底部浮层</div>
  </div>

• CSS：

  .popup {
      position: fixed;
      left: 0; right: 0; bottom: 0; top: 0;
      z-index: 19;
      background: rgba(0,0,0,.5);
      overflow: hidden;
      opacity: 0;
      transition: opacity .2s, visibility .2s;
      visibility: hidden;
  }
  .content {
      line-height: 100px;
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background-color: #fff;
      transform: translateY(100%);
      transition: transform .2s;
  }
  .popup.active {
      transition-property: opacity;
      opacity: 1;
      visibility: visible;
  }
  .active > .content {
      transform: translateY(0%);
  }

• JS：

  button.onclick = function () {
      popup.classList.add('active');
  };
  popup.onclick = function () {
      this.classList.remove('active');
  };