当一个按钮被点击时，如果一个特定的'div‘是'display:block’，那么父'div‘是如何淡出的？

<div class="parent">
  <div class="specific-div">Content</div>
</div>
<button id="btn">Click me</button>

.parent {
  transition: opacity 0.5s ease;
}

.fade-out {
  opacity: 0;
}

document.getElementById("btn").addEventListener("click", function() {
  var specificDiv = document.querySelector(".specific-div");
  var parentDiv = specificDiv.parentNode;
  if (specificDiv.style.display === "block") {
    parentDiv.classList.add("fade-out");
  }
});