如何使用下面的代码在点击时淡入？

<button id="fadeButton">点击淡入</button>
<div id="fadeDiv">这是要淡入的内容</div>

#fadeDiv {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in {
  opacity: 1;
}

document.getElementById("fadeButton").addEventListener("click", function() {
  var fadeDiv = document.getElementById("fadeDiv");
  fadeDiv.classList.add("fade-in");
});