My goal is to implement a CSS transition that triggers when a button is clicked, causing it to fade out and disappear while another element simultaneously takes its place.
I have almost achieved the desired effect, but there's an issue. When I add the .hide class to the button, it seems to "jump" (the height property should not change until the opacity animation completes). Additionally, the max-height property doesn't seem to respect the CSS transition properties I've defined in the stylesheet.
You can view the code example on Codepen: https://codepen.io/basickarl/pen/zwzNXM?editors=1111
Below is the HTML structure:
<div class="app-profession">
<button id="one" class="add-profession" onclick="func()">
<img/>
Click me!
</button>
<div id="two" key="pickArea" class="pick-area">
Here! 2
</div>
</div>
This is the SCSS styling for the elements:
button.add-profession {
width: 500px;
padding-top: 16px;
padding-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Verdana';
font-size: 18px;
font-weight: 300;
text-decoration: none;
color: black;
outline-style: none;
border: none;
border-radius: em(0);
opacity: 1;
background: lightblue;
img {
margin-right: em(5);
content: url('static/images/add_cross_white.png');
height: em(30);
}
transition: opacity 2s ease-in-out 0s, max-height 0s linear 2s, padding 0s ease-in-out 2s;
&.hide {
opacity: 0;
max-height: 0; // <--- here
padding: 0;
overflow: hidden;
}
&:hover {
background-color: red;
cursor: pointer;
}
}
.pick-area {
display: flex;
justify-content: center;
align-items: center;
background-color: green;
opacity: 0;
max-height: 0em;
overflow: hidden;
width: 500px;
padding: 16px;
transition: all 2s linear 2s;
&.show {
max-height: 500px;
opacity: 1;
}
}
And finally, the JavaScript function triggering the transitions:
function func() {
document.getElementById('one').classList.add('hide');
document.getElementById('two').classList.add('show');
}