zoukankan      html  css  js  c++  java
  • 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{
       100%;
      height: 160px;
      background-color: white;
      position: absolute;
      bottom: 0px;
      z-index: 10;
      display: none;
      flex-direction: row;
      justify-content: center;
    }
  • 相关阅读:
    TCGA下载神器--TCGAbiolinks
    perl模块终极解决方案--转载
    Web前端优化
    关于CDN
    手写RateLimiter
    互联网高并发之限流
    互联网高并发之Hystrix实现服务隔离和降级
    关于Hystrix
    Apollo原理
    SpringBoot2.0之整合Apollo
  • 原文地址:https://www.cnblogs.com/Oldz/p/14183022.html
Copyright © 2011-2022 走看看