Fade switch between divs with radio button - html

Question

I got two DIVs that I switch visibility with, via two radio buttons.
I cant figure out how to use css transition to fade the content in and out when switching DIV. For example, have the div fade out to the left, while the other fades in from the right.
Second issue is, I tried to set the div to position:absolute, but the content below the two divs would then be hidden, i need the content below my two DIVS that I hide/show, to always be below. So i guess position absolute is a no go.
.div_one,
.div_two{
display:none !important;
}
#radio_one:checked ~ .div_one,
#radio_two:checked ~ .div_two{
display:block !important;
}
.div_one{
background-color:grey;
}
.div_two{
background-color:orange;
}
#below{
background-color:pink;
}
<input type="radio" name="tabs" id="radio_one" checked="checked"/>
<label for="radio_one" >01</label>
<input type="radio" name="tabs" id="radio_two" />
<label for="radio_two" class="">02</label>
<div class="div_one">
div one
</div>
<div class="div_two">
div two<br/><br/>
</div>
<div id="below">i need to be below the above block, regardless of their height.</div>
thanks in advance!

Answer 1

What you usually do in case you want to have an animation when one div slides to the side and another one slides in, is put them both in a parent div (usually referred to as the track) which is twice the width of its parent, and then use transform: translateX() to shift its location. It's also important to give the track overflow: hidden;. Now you don't need to give the slides an absolute position.
Regarding the track height, I added a JS snippet that would change the height according to the item displayed.
Example:
const track = document.getElementById('track');
const slides = document.querySelectorAll('#track > .slide');
const buttons = document.querySelectorAll('.radio_button');
buttons.forEach((button, idx) => {
button.addEventListener('click', () => {
let height = slides[idx].offsetHeight;
track.style.height = height + 'px';
});
});
* {
overflow: hidden;
}
#track {
width: 200%;
transition: all 0.3s ease;
overflow: hidden;
height: 1em;
}
.slide {
width: 50%;
display: inline-block;
float: left;
}
#radio_one:checked~#track {
transform: translateX(0%);
}
#radio_two:checked~#track {
transform: translateX(-50%);
}
#div_one {
background-color: grey;
}
#div_two {
background-color: orange;
}
#below {
background-color: pink;
}
<input type="radio" name="tabs" class="radio_button" id="radio_one" checked="checked" />
<label for="radio_one">01</label>
<input type="radio" name="tabs" class="radio_button" id="radio_two" />
<label for="radio_two" class="">02</label>
<div id="track">
<div class="slide" id="div_one">
div one
</div>
<div class="slide" id="div_two">
div two
<br/>
<br/>
</div>
</div>
<div id="below">i need to be below the above block, regardless of their height.</div>