隐藏遮罩层
<!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,然后再将遮罩层隐藏,为什么这样做不能达到效果呢?
4
收起
正在回答
1回答
同学你好,因为js是从上到下进行执行的,当执行完了$mask.style.opacity=0;这一句后就直接会执行$mask.style.display='none';所以是没有效果的。
所以需要使用transitionend,因为透明度的过渡效果使用transition做的,所以这里要用transitionend,等transition控制的opacity从1-0之后。在$mask.style.display='none';进行隐藏。
祝学习愉快!
相似问题
登录后可查看更多问答,登录/注册
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星