在JavaScript中添加类时CSS过渡不起作用

Question

我希望淡化弹出窗口，而不是单击或关闭时立即显示。您能帮我提供代码并解释问题所在吗？

我在这里已经阅读了很多字符串，但是我什么都没做。最相似的字符串无法解决问题：CSS transition not working when changing class by javascript

我的CSS：

.details{
  display: none;
  position: fixed; 
  z-index: 100; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(46,143,255,0.9); 
  text-align: center;
  opacity: 0;
  transition: all 1000ms ease-in-out;
}

.details.open{
  display:block;
  opacity: 1;
}

我的JS：

    var bio;
function details(post_id) {
    bio = document.getElementById(post_id);
    bio.classList.add("open");
}

function detailsClose(post_id) {
    bio.classList.remove("open");
}

我的HTML：

<div class="demo" onclick="details(post_id)">
//thumbnail content
</div>

<div id="<?php the_ID()?>" class="details">
   <div  class="demo-details-cont">
      <span onclick="detailsClose(post_id)" class="demo-close">×</span>
   </div>

用户应该能够单击缩略图并看到弹出窗口的淡入。当他们从X关闭弹出窗口时，应该淡出关闭。