How do I make close animation?-CodePudding

I have the following code to close modal window when I click on close button. I want it to close with going up animation. For now modal window goes up and then it goes back again.

But it doesn't work. Can someone please help me why is that so?

<!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 >
        <div >
            <span >&times;</span>
            <div >
                Sign up page
            </div>
            <div >
                <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>

Here is the link to codesandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html

CodePudding user response：

animation: close 0.4s forwards; to prevent the animation from resetting to its initial frame.

z-index: -1; inside the close keyframe to not block your "Modal window" button.

And you need to remove close-with-anim to be able to use it again.

      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 >
      <div >
        <span >&times;</span>
        <div >
          Sign up page
        </div>
        <div >
          <input type="text" name="" id="" />
        </div>
      </div>
    </div>