1 2 3 4

弹窗动画练习 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="dialog-face"></div>
  <div id="dialog">
    <div>
      <button id="all" onclick="openall()">
          全屏
      </button>
      <button id="dialog-zoom" onclick="zoom()">
          缩小
      </button>
      <button id="cls" onclick="closeDio()">
          关闭
      </button>
    </div>
    <button id="enter" onclick="ok()">
        <div id="enterSpan">确定</div>
        <div id="loading"></div>
    </button>
  </div>
  <button id="btn" onclick="test()">
    弹窗
  </button>
  <script>
    let btn = document.getElementById('btn');
    let dialog = document.getElementById('dialog');
    let dialogFace = document.getElementById('dialog-face');
    let cls = document.getElementById('cls');
    let all = document.getElementById('all');
    let dialogZoom = document.getElementById('dialog-zoom');
    let enterSpan = document.getElementById('enterSpan');
    let loading = document.getElementById('loading');
    var smallOrBig = false;
    function test (e) {
      dialog.style.display = 'block';
      dialogFace.style.display = 'block';
      dialog.style.animation = 'dialogSlipToUP 500ms ease 1 forwards';
      dialogZoom.style.display="none";
      all.style.display="inline";
    }
    function closeDio() {
      dialog.style.animation = (smallOrBig ? 'dialogSlipToAllDOWN' : 'dialogSlipToDOWN') +' 500ms ease 1 forwards';
      dialogFace.style.display = 'none';
      this.smallOrBig = false;
    }
    function openall() {
      this.smallOrBig = true;
      dialog.style.animation = 'dialogSlipToAll 500ms ease 1 forwards'
      all.style.display="none"
      dialogZoom.style.display="inline"
    }
    function zoom () {
      this.smallOrBig = false;
      all.style.display="inline"    
      dialogZoom.style.display="none"
      dialog.style.animation = 'dialogSlipToZoom 500ms ease 1 forwards'
    }
    function ok () {
      loading.style.display = 'block';
      enter.style.background = '#fff';
      enter.disabled = true;
      let timer = setInterval(() => {
        loading.style.display = 'none';
        enter.style.background = 'rgb(62, 106, 146)';
        timer = null;
        enter.disabled = false;
      }, 2000);

    }
  </script>
  <style>
    body {
      margin:0;
      padding: 0;
    }
    /* 遮罩层样式*/
    #dialog-face {
      position: fixed;
      background: rgba(232, 243, 243, 0.911);
      height: 100%;
      width: 100%;
      z-index: 1000;
      top:0;
      left: 0;
      opacity: .7;
      display: none;
    }
    /* 弹窗样式*/
    #dialog {
      width: 300px;
      height: 200px;
      display: none;
      background: #fff;
      position: fixed;
      bottom:0;
      right: 0;
      margin: -100px 0 0 -150px;
      transform: translate(100%, 100%);
      z-index: 2000;
    }
    /* 定义动画*/
    /*打开弹窗动画*/
    @keyframes dialogSlipToUP {
        0%{
            opacity: 0.3;
            bottom: 0;
            right: 0;
        }
        100%{
            transform: translate(50%,50%);
            opacity:1;
            bottom: 50%;
            right: 50%;
            width: 300px;
            height: 200px;
            display: block;
        }
    }
    /* 关闭弹窗动画（小窗）*/
    @keyframes dialogSlipToDOWN {
        0%{
          transform: translate(50%,50%);
          opacity:1;
          bottom: 50%;
          right: 50%;
        }
        100% {
          transform: translate(100%, 100%);
          opacity: 0;
          display: none;
        }
    }
    /* 关闭弹窗动画（大窗）*/
    @keyframes dialogSlipToAllDOWN {
        0%{
          width: 100%;
          height: 100%;
          bottom: 100%;
          right: 100%;
          opacity:1;
        }
        100% {
          transform: translate(100%, 100%);
          opacity: 0;
          display: none;
        }
    }
    /* 弹窗放大和缩小动画*/ 
    @keyframes dialogSlipToAll {
      0%{
          transform: translate(50%,50%);
          width: 300px;
          height: 200px;
          bottom: 50%;
          right: 50%;
        }
      100% {
        width: 100%;
        height: 100%;
        transform: translate(0%, 0%);
      }
    }
    @keyframes dialogSlipToZoom {
      0%{
        width: 100%;
        height: 100%;
        transform: translate(0%, 0%);
        }
      100% {
        transform: translate(50%,50%);
        width: 300px;
        height: 200px;
        bottom: 50%;
        right: 50%;
      }
    }
    button {
      padding: 3px  10px;
      background: rgb(62, 106, 146);
      color: #fff;
    }
    button:hover {
      border-color: rgb(35, 236, 220);
    }
    /* loading动画代码*/
    #loading {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -8px;
      border: 2px solid rgb(166,166,166);
      border-top-color: transparent;
      border-radius: 100%;
      animation: circle infinite 0.75s linear;
      display: none;
      z-index: 3000;
    }
    @keyframes circle {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    #enter {
      position:relative;
      margin:145px 0 0 0;
    }
  </style>
</body>
</html>

 

posted @ 2022-07-21 17:03  无序  阅读(30)  评论(0)    收藏  举报