弹窗动画练习
<!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>