例子： 注意如果想要有transition动画，一开始不要dispaly: none
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .mask{ display: none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(100, 100, 100, .3); } .son{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 99; height: 0px; transition: all 0s;//设置回0s是因为，回去的时候只有这一个类，可以快速回退 background-color: #fff; } .go{ height: 300px; transition: all 0.5s; } .active{ display: block; } </style> <body> <button>click me</button> <div class="mask"> </div> <div class="son">1321231</div> </body> <script> let btn = document.querySelector('button'); let mask = document.querySelector('.mask'); let son = document.querySelector('.son') btn.addEventListener('click',function(){ mask.classList.add('active') son.classList.add('active','go') }) mask.addEventListener('click',function(){ mask.classList.remove('active') son.classList.remove('active','go') }) </script> </html>