js+css实现简单的弹框动画

news2024/12/23 22:13:05

效果图

只是一个简单的演示demo，但是可以后面可以优化样式啥的

在这里插入图片描述

刚开始元素的display为none，然后，为了给元素展示时添加一个动画，首先要添加样式类名show，让它覆盖display:none，变得可见。然后，添加元素放大的动画样式类名
隐藏的时候，也需要有动画，并且动画结束完成之后，元素的display应当恢复成原来的none，也就是变得不可见。因此，需要监听动画完成事件。

<!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>

        /* body占满整个页面 */
        body {
            margin: 0;
            height: 100vh;
        }

        /* 设置box1默认大小，以及设置 display:none，让它一开始就不被看见 */
        .box1 {
            width: 400px;
            height: 200px;
            background-color: #bfa;
            margin: 10px auto;
            display: none;
        }

        /* 定义元素放大的动画 */
        @keyframes scaleup {
            0% {
                transform: scale(0)
            }
            100% {
                transform: scale(1)
            }
        }
        /* 定义元素放大的类 */
        .scaleup {
            animation: scaleup 0.5s;
        }

        /* 元素如果要显示, 必须通过添加该类的方式(约定) */
        .show {
            display: block;
        }

        /* 元素缩小的动画 */
        @keyframes scaledown {
            0% {
                transform: scale(1)
            }
            100% {
                transform: scale(0)
            }
        }
        /* 定义元素缩小的类 */
        .scaledown {
            animation: scaledown 0.5s;
        }

    </style>
    <script>
        window.onload = () => {

            let box1 = document.querySelector('.box1')
            let openBtn = document.querySelector('.open')
            let closeBtn = document.querySelector('.close')
           
            openBtn.onclick = () => {

                if(box1.show) {/* 用于标记box1是否被打开过, 如果之前被打开过的话, 再次点击打开无效 */
                    return 
                }
                box1.show = true /* 标记打开过 */

                box1.classList.add('show')   /* 添加让元素显示的类 */
                box1.classList.add('scaleup')/* 添加元素显示时的动画 */

                let callback  = () => {
                    box1.classList.remove('scaleup') /* 动画完成后, 移除放大动画的类；为什么要移除呢？动画播放结束，这个类也就没用了，并且让下次可以继续指定放大的动画的样式类,来展示动画 */
                    box1.removeEventListener('animationend',callback) /* 动画完成后, 移除监听 */
                }
                box1.addEventListener('animationend', callback) /* 动画完成后, 执行指定的函数 */
            }

            closeBtn.onclick = () => {
                if(!box1.show) {
                    return
                }

                box1.classList.add('scaledown') /* 关闭时, 指定缩小的动画的样式类 */

                /* 缩小动画结束后, 应当要把这个框给隐藏掉, 就是把box1的display恢复成原来的none */
                let callback  = () => {
                    box1.classList.remove('show') /* 把show样式类去掉，就会用到box1类中的display:none了 */
                    box1.classList.remove('scaledown') /* 跟上面的解释一样 */
                    box1.removeEventListener('animationend',callback) /* 动画完成后, 移除监听 */
                    box1.show = false
                }
                box1.addEventListener('animationend', callback) /* 动画完成后, 执行指定的函数 */
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="box1 scaleup"></div>
    </div>
    <hr/>
    <button class="open">open</button>
    <button class="close">close</button>
</body>
</html>