如何实现像jQuery的slideDown一样的滑动效果,但只使用CSS？

<div class="slide-down">
  <div class="box">
    这是一个滑动下来的盒子。
  </div>
</div>

.slide-down {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}

.slide-down.active {
  max-height: 200px; /* 根据需要设置 */
}

.box {
  background-color: lightblue;
  padding: 20px;
}

document.querySelector('.slide-down').classList.add('active');