Imagine this scenario: I have four different elements overlapping within a parent element, structured like so:
<body class="one">
<div id="overlapping">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
...
The CSS is set up in the following manner:
.one, .two, .three, .four { display: none; }
body.one .one,
body.two .two,
body.three .three,
body.four .four {
display: block;
}
Afterwards, there's some javascript involved along with buttons to switch classes on the 'body' element.
This approach works effectively, but I want to introduce a CSS transition for smoother block switches. The issue is that these blocks vary in height and width, making it challenging to animate based on fixed dimensions without compromising responsiveness. Unfortunately, transitions cannot be applied directly on the display property.
Animating visibility or opacity is not feasible either because hidden or transparent elements still occupy space in the layout. This means true overlap can only be achieved when elements have a display property of none.
(One potential solution could involve positioning all elements at the top left of #overlapping using CSS rules to stack them neatly while allowing for normal text flow. However, such a method has yet to be discovered.)
So, the question remains - how can I animate these switches? Is there a pure CSS solution, or should JS animations be considered?