如何将淡入淡出效果应用于“加载更多”“显示更少”Javascript

// HTML
<button id="loadMoreBtn">加载更多</button>
<div id="content" style="display: none;">
  <!-- 加载的内容 -->
</div>

// CSS
#content {
  transition: opacity 0.5s;
}

// Javascript
var loadMoreBtn = document.getElementById("loadMoreBtn");
var content = document.getElementById("content");

loadMoreBtn.addEventListener("click", function() {
  if (content.style.display === "none") {
    content.style.display = "block";
    setTimeout(function() {
      content.style.opacity = 1;
    }, 10);
    loadMoreBtn.innerHTML = "显示更少";
  } else {
    content.style.opacity = 0;
    setTimeout(function() {
      content.style.display = "none";
    }, 500);
    loadMoreBtn.innerHTML = "加载更多";
  }
});