Most elements are added / removed from the UI using a change in the display property.
For example if you want to make an HTML element appear you can add display: block;. Then you can remove it with display: none;. This is very simple and widely used.
It would be nice to have a simple way to make the element fade in / fade out.
The difference between opacity and display is that display affects positioning/layout and opacity affects only how the element is rendered in its current position.
In terms of rendering, it’s clear what 0.3 opacity means.
But in terms of layout, what does it mean that an element is 0.2 block and 0.8 none? How should it be positioned, and how should it affect the position of other elements?