<div>
  <button id="button">open item</button>
  <div class="visibled-content">
    <p>display block to block (transition only opacity)</p>
  </div>
  <div class="invisibled-content">
    <p>display none to block</p>
  </div>
</div>

.invisibled-content {
  display: none;
  border: solid 1px #333;
  overflow: hidden;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.visible {
  display: block;
  transition: opacity 4s;
}

.visibled-content {
  border: solid 1px #333;
  overflow: hidden;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  const invisibledContent = document.querySelector(".invisibled-content");
  invisibledContent.classList.add("visible");
  
  const visibledContent = document.querySelector(".visibled-content");
  visibledContent.classList.add("visible");
});