Smooth simultaneous transition of height and margin - html

Question

How can I make smooth transition of block with margin? See my code below:
.counter {
margin: 5rem auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
width: 40rem;
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
margin: 2rem 0;
font-weight: bold;
transition: all 1s;
max-height: 500px;
overflow: hidden;
}
.value.hidden {
margin: 0;
max-height: 0px;
}
<main class="counter">
<h1>Counter</h1>
<div id="val" class="value">10</div>
<button onClick="document.getElementById('val').classList.add('hidden')">Hide Counter</button>
<button onClick="document.getElementById('val').classList.remove('hidden')">Show Counter</button>
</main>
If you click on "Hide Counter", it is not smooth, but it looks like there are two different transitions (look on codepen). Why and how can I make smooth transition?

Answer 1

I just decided to change max-height to height and setting height to a fixed number
body {
display: flex;
height: calc(100vh - 16px);
align-items: center;
}
.counter {
margin: 0px auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
width: calc(100vw - 48px);
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
margin: 2rem 0;
font-weight: bold;
transition: all 1s;
height: 50px;
overflow: hidden;
}
.value.hidden {
margin: 0;
height: 0px;
}
<main class="counter">
<h1>Counter</h1>
<div id="val" class="value">10</div>
<button onclick="document.getElementById('val').classList.add('hidden')">Hide Counter</button>
<button onclick="document.getElementById('val').classList.remove('hidden')">Show Counter</button>
</main>

Answer 2

I have found the bug in your code... you just need to go on line no. 24 in css in your codepen and change max-height to height and you are all set to go!!

Answer 3

Terry is right in his comment: transitioning e.g. something with actual height 50px from max-height: 100px; to max-height: 0; produces visible change only during the second half of animation, when it reaches the actual height.
CSS can transition or animate only explicitly given values.
Satyam is also right suggesting you can transition real effective height to get all transitions run simultaneously. So you have to either give element explicit (max-)height in CSS, or you can obtain it from actual computedStyle before triggering the transition. There are few important caveats, see comments POC:
.counter {
margin: 0 auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
font-weight: bold;
transition: all 1s linear;
overflow: hidden;
background-color: grey;
margin: 2rem 0;
height: auto; /* you cannot transition this;
will be set in inline style
with JS */
}
.value.hidden {
height: 0px !important; /* to fight inline style, !important is necessary */
margin: 0 0;
font-size: 0;
}
<main class="counter">
<div id="val" class="value">10</div>
<button onClick="
if(!val.style.height){
val.style.height = getComputedStyle(val).height
}
/* caveat: 'seal' that value to give transition chance to start at it
(enforce style recalc and reflow)
*/
val.getBoundingClientRect();
val.classList.toggle('hidden');">Toggle Counter</button>
</main>