如何向显示隐藏的li项的“显示更多类别”按钮添加过渡？

<ul class="category-list">
  <li>分类1</li>
  <li>分类2</li>
  <li>分类3</li>
  <li>分类4</li>
  <li>分类5</li>
  <li class="hidden">分类6</li>
  <li class="hidden">分类7</li>
  <li class="hidden">分类8</li>
  <li class="hidden">分类9</li>
  <li class="hidden">分类10</li>
  <li><button id="show-more-btn">显示更多类别</button></li>
</ul>

.category-list li.hidden {
  display: none;
}

.category-list li.transition {
  transition: all 0.5s ease;
}

document.getElementById("show-more-btn").addEventListener("click", function() {
  var hiddenItems = document.querySelectorAll(".category-list li.hidden");
  for (var i = 0; i < hiddenItems.length; i++) {
    hiddenItems[i].classList.toggle("transition");
    hiddenItems[i].classList.toggle("hidden");
  }
  this.textContent = (this.textContent === "显示更多类别") ? "隐藏类别" : "显示更多类别";
});