Most elements are added / removed from the UI using a change in the
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.
transition: display 2s;
Could you animate
opacity along with
Thanks, I know that you can use some (slightly more complex) workarounds.
However I was wondering why
display: none; doesn’t have a built-in way to be animated (which seems a very common use case).
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?