隐藏遮罩层

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .btn{
            width: 100%;
            height: 200px;
            font-size: 100px;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            opacity: 1;
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <button id="btn" class="btn">提交</button>
    <div id="mask" class="mask"></div>
    
</body>
<script>
    const $btn=document.getElementById('btn');
    const $mask=document.getElementById('mask');
    $btn.addEventListener('click',()=>{
        console.log('提交表单');
    })
    $mask.addEventListener('touchend',()=>{
        $mask.style.opacity=0;
        $mask.style.display='none';
        
    })
    
    $mask.addEventListener('touchstart',()=>{
        // console.log(2);
        // $mask.style.display='none';
    })
</script>
</html>

先将遮罩层的透明度变为0，然后再将遮罩层隐藏，为什么这样做不能达到效果呢？

慕芸芸 2023-05-08

源自：移动Web开发常见问题 2-3 Touch事件点击穿透

收起

1回答

好帮手慕小李回答被采纳获得+3积分 2023-05-08 15:10:02

同学你好，因为js是从上到下进行执行的，当执行完了$mask.style.opacity=0;这一句后就直接会执行$mask.style.display='none';所以是没有效果的。

所以需要使用transitionend，因为透明度的过渡效果使用transition做的，所以这里要用transitionend，等transition控制的opacity从1-0之后。在$mask.style.display='none';进行隐藏。

祝学习愉快！

收起回答

慕芸芸提问者 #1

当执行完了$mask.style.opacity=0;透明度还没有从1变成0？

2023-05-08 15:23:51
好帮手慕小李回复提问者慕芸芸 #2

当display=none时就相当于是直接隐藏了，隐藏的元素opactiy则不在生效了。
所以才会有监听transitionend，等transition彻底走完，也就是opacity已经到了0以后。在进行display=none此时隐藏元素就可以了。建议在看看视频，监听transitionend写的位置在哪儿。

2023-05-08 15:26:45