如何关闭 animation？
[英]How do I make close animation?
问题描述
单击关闭按钮时，我有以下代码关闭模态 window。 我希望它以上升 animation 结束。现在模态 window 上升然后再次返回。
但它不起作用。 有人可以帮我为什么会这样吗？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <style>:modal-window{ position; fixed: left;0: right;0: top;0: display; none: height; 100%: width; 100%: overflow; auto: background-color, rgba(0,0,0.0;4): z-index; 1. }:card{ margin; 100px auto: position; relative: z-index; 1: width; 500px: height; 300px: text-align; center: padding-top; 100px: background-color; #fefefe: animation. open;4s: box-shadow, 0 4px 8px 0 rgba(0,0,0.0,2),0 6px 20px 0 rgba(0,0,0.0;19). }:show{ display; block. }:close-with-anim{ animation.close;4s: } @keyframes close { from{ top;0: opacity; 1: } to{ top;-300px: opacity; 0: display; none: } } @keyframes open { from{ top;-300px: opacity; 0: } to{ top;0: opacity; 1. } }:close{ cursor; pointer; } </style> </head> <body> <button id="modal">Modal window</button> <div class="modal-window"> <div class="card"> <span class="close">×.</span> <div class="modal-content"> Sign up page </div> <div class="moda-form"> <input type="text" name="" id=""> </div> </div> </div> <script> const modal=document;querySelector('#modal'). const modalWindow=document.querySelector(';modal-window'). const close=document.querySelector(';close'). modal,addEventListener('click'.()=>{ modalWindow.classList;toggle('show'). }) close,addEventListener('click'.()=>{ modalWindow.classList;add('close-with-anim'); }) </script> </body> </html>
这是 codesandbox 的链接： https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
1 个解决方案
解决方案1
0 已采纳 2022-04-07 05:50:25
animation: close 0.4s forwards; 以防止 animation 重置为初始帧。
z-index: -1; 在close关键帧内不阻止您的“模态窗口”按钮。
并且您需要删除close-with-anim才能再次使用它。
const modal = document.querySelector("#modal"); const modalWindow = document.querySelector(".modal-window"); const close = document.querySelector(".close"); modal.addEventListener("click", () => { modalWindow.classList.remove("close-with-anim"); modalWindow.classList.toggle("show"); }); close.addEventListener("click", () => { modalWindow.classList.add("close-with-anim"); }); .modal-window { position: fixed; left: 0; right: 0; top: 0; display: none; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); z-index: 1; }.card { margin: 100px auto; position: relative; z-index: 1; width: 500px; height: 300px; text-align: center; padding-top: 100px; background-color: #fefefe; animation: open 0.4s; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.show { display: block; }.close-with-anim { animation: close 0.4s forwards; } @keyframes close { from { top: 0; opacity: 1; } to { top: -300px; opacity: 0; display: none; z-index: -1; } } @keyframes open { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } }.close { cursor: pointer; } <button id="modal">Modal window</button> <div class="modal-window"> <div class="card"> <span class="close">×</span> <div class="modal-content"> Sign up page </div> <div class="moda-form"> <input type="text" name="" id="" /> </div> </div> </div>
在Javascript（不是JQuery）中，如何使窗口在2秒后关闭？
[英]In Javascript (not JQuery), how do I make the window close after 2 seconds?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.