场景: 我现在要做一个蒙版 ,而这个蒙版的的要求如下

  1. 点击按钮显示蒙版, 蒙版要求从中心点向四边扩展渐显.
  2. 点击蒙版,蒙版隐藏, 而且必须有动画效果 ;

我应对以上场景 ,第一个想到的是 , 使用opacity + 控制蒙版 width + height 实现 , 附上代码

html

<div class="content">我是内容</div>
<button class="btn">点击我显示蒙版</button>
<div class="mask"></div>

css

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin: 50px auto;
        }

        .btn {
            display: block;
            margin: 50px auto;
            outline: none;
            border: none;
            background: dodgerblue;
            padding: 10px;
            border-radius: 3px;
            color: #fff;
        }

        .mask {
            /*让蒙版居中 , 并且是隐藏状态 */
            width: 0;
            height: 0;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: all 0.5s;
        }
    </style>

重头戏就在js上面了 .

js

<script>
    let btn = document.querySelector(".btn");
    let mask = document.querySelector(".mask");
    btn.onclick = function () {
        mask.style.width = "100%";
        mask.style.height = "100%";
        mask.style.opacity = "1";
    };
    mask.onclick = function () {
        this.style.opacity = "0";
        this.style.width = "0";
        this.style.height = "0";
    }
</script>

相信很多人看到这份 js 代码, 就会认为这样子没错 ,  对, 是没错 ,但是这样子写的话 , 你会发现 ,你的显示和隐藏效果就会有一个问题 , 你点击蒙版关闭的时候 , 这个动画效果 ,你能看到渐隐, 但是你也能看到改变宽高, 所以这个不符合第二点的要求 , 而这个要怎么解决呢 ?

而我的解决方法是如下的 ,  首先改变一下 css 的一个值

//把css中的这个过度动画的 all (opacity,width,height)  换成 opacity ,也就是只对 opacity生效 .

.mask{
    transition: opacity 0.5s;
}

而这样子再测试一下 , 你会发现原本的哪个问题好了 ,但是又出现了新的问题 ,而新的问题就是 你点击 mask 蒙版的时候 , 蒙版是直接消失的, 而不是渐隐消失的 .

而这个原因其实也很简单 , 因为我设置了 mask 的点击事件为 opacity ,width, height  = 0 ,而我一点击的时候,  opacity的过渡效果还没有执行完, 而 width ,height 就已经变成了 0 了.这样子 就呈现出了一种没有渐隐效果 ,而是直接消失不见的感觉 ,解决方法如下

mask.onclick = function () {
        this.style.opacity = "0";
        setTimeout(function(){
            mask.style.width = "0";
            mask.style.height = "0";
        },500);
    }

改变一下 mask 的点击事件 ,让 opacity 先执行 , 最后再用延时定时器控制他的 width 和 height = 0 . 定时器的时间设置为了上面  opacity 的过渡时间一致即可.


很多人一开始会问 , 我用 display 不行吗, 我直接使用 opacity 不加上 width 和 height 不可以吗 ? 我使用 visibility 不可以吗 ,答案都是可以的 只不过每个人有每个人的方法而已

display 会让元素消失 , 而没有的元素是不能做过渡的 , 所以不适合做过渡

opacity 会让元素隐藏 ,但是仅仅是让元素看不见 ,不代表摸不着, 所以 不加 width 和 height 进行控制, 则会你隐藏之后 ,你再也点不了其他元素

visibility 也是让元素隐藏 ,但是 别忘了 ,他还是会占据空间的


附上完整代码 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin: 50px auto;
        }

        .btn {
            display: block;
            margin: 50px auto;
            outline: none;
            border: none;
            background: dodgerblue;
            padding: 10px;
            border-radius: 3px;
            color: #fff;
        }

        .mask {
            /*让蒙版居中 , 并且是隐藏状态 */
            width: 0;
            height: 0;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.5s;
        }
    </style>
</head>
<body>
<div class="content">我是内容</div>
<button class="btn">点击我</button>
<div class="mask"></div>
<script>
    let btn = document.querySelector(".btn");
    let mask = document.querySelector(".mask");
    btn.onclick = function () {
        mask.style.width = "100%";
        mask.style.height = "100%";
        mask.style.opacity = "1";
    };
    mask.onclick = function () {
        this.style.opacity = "0";
        setTimeout(function(){
            mask.style.width = "0";
            mask.style.height = "0";
        },500);
    }
</script>
</body>
</html>

预览地址: 点击预览

完结 , 谢谢 ~