如何正确地动画(展开和折叠)具有多行的文本视图

<div class="text-container">
  <div class="text-content" id="textContent">
    这里是多行文本内容。这里是多行文本内容。这里是多行文本内容。这里是多行文本内容。
  </div>
  <button id="toggleButton">展开/折叠</button>
</div>

.text-container {
  width: 300px;
  overflow: hidden;
}

.text-content {
  transition: max-height 0.5s ease-in-out;
  max-height: 100px; /* 初始高度 */
  overflow: auto;
}

.hidden {
  max-height: 0 !important;
}

document.getElementById('toggleButton').addEventListener('click', function() {
  var textContent = document.getElementById('textContent');
  if (textContent.classList.contains('hidden')) {
    textContent.classList.remove('hidden');
  } else {
    textContent.classList.add('hidden');
  }
});