As the title suggests, I am looking to initiate the height animation starting from the bottom rather than the top. While this question has been asked before in places such as here, it does not provide the solution I am seeking and involves the use of jQuery which I prefer to avoid.
I have set up a simple jsFiddle demonstration of a sliding box.
Here is my code:
function addClass() {
const box = document.querySelector('.box');
box.classList.toggle('show');
}.container{
height: 400px;
width: 200px;
border: 2px solid black;
}
.box{
height: 0;
overflow: hidden;
background: black;
transition: 0.4s;
transform-origin: bottom;
}
.box.show{
height: 400px;
}<div class="container">
<div class="box">
</div>
</div>
<button onclick="addClass()">
click me
</button>My desired result is for the box to slide up from the bottom instead of the top.