从底部而不是顶部开始高度动画

就像标题说的,我想从底部而不是顶部开始高度动画??我知道这个问题被问过几次,比如 here 但它没有回答我的问题,并且使用了jquery,我不想这样做。

我创建了一个简单的 sliding box

我的代码如下

HTML

<div class="container">
  <div class="box">

  </div>
</div>

<button onclick="addClass()">
  click me
</button>

CSS

.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;
}

JavaScript

function addClass() {
    const box = document.querySelector('.box');
    box.classList.toggle('show');
}

我期望的结果是让盒子从底部而不是顶部向上滑动。