（慎重）这个HTML DOM结构 不好做css动画。正确的在后面。

准备CSS

假如按照目前的HTML结构和思路去完善，写是可以写出来，但是想加上动画就不行了，因为在同一个div里面，都是公用一个transition属性。

这里我们换一个DOM结构，把 mask 分离开来。因为我们想在mask里面添加一个动画，还想在box里面添加一个动画，假如2个在一起就会发生重叠。而且是对display:none，变成不起动画作用的。我们用opacity/visibility代替，之所以不随便用z-index是因为，这会造成一些bug。你可以尝试加上z-index试一试，你会发现当z-index为1的时候，按钮是白色的，其他地方是黑色的，这种体验就非常不好了。

JS逻辑其实就是添加类名。