How to smoothly close the menu?

Question

Monitors

Guys, the stupor is small. On click, the menu appears smoothly, the opacity is animated. It also needs to fade smoothly, and not end abruptly

https://codepen.io/brezze/pen/gZpypX

Answer 1

Take a monitor type * VA (MVA, PVA, etc.)
for long-term work, it is self-explanatory.
Or at worst IPS. The class of the monitor also matters. For example, from IPS, this Dell UltraSharp series is relatively affordable and of acceptable quality. Etc.
In extreme cases, you can get by with just a good TN-Coy.
The diagonal of the monitor for work is 23-24 inches minimum. The resolution, of course, will not be less than 1920x1080.
It is for work, and not for films - monitors are not widescreen, but where can you find them now for reasonable money with such a large diagonal.
Of course, the matte screen.

Answer 2

I took a Benq gw2460 hm a few years ago to work with graphics, benq has a good function, called Flicker-free, in general it does not flicker, and the eyes do not get tired at all even if you sit behind it for 12 hours. The matrix there is some kind of *VA, there are no flashes, a very clear picture, but it needs to be calibrated, otherwise it shows wrong colors.

Answer 3

If you have money for a new monitor, and it should not be a pity for work and for the eyes, then take a 23-27" monitor with a *VA or *-IPS matrix and a matte screen. some inductor or transformer and the capacitors dried up, hence the whistle is considered a minor breakdown, then it can be conveniently used as a second monitor for all sorts of messengers and secondary tasks that are convenient to keep under the eye.

Answer 4

visibility: hidden fires first. Therefore, it disappears. And the animation works on opacity
You can add a delay to it.
.menu-wrap {
position: fixed;
width: 100%
height: 100%;
visibility: hidden;
opacity: 0
z-index: 100;
}
.menu-wrap.open {
visibility: visible;
opacity: 1
}
https://codepen.io/anon/pen/GPJLWQ
Or, instead of hiding with visibility: hidden , use pointer-events: none ;