CSS Transitions Not Working When Adding A Class In Javascript [duplicate]

I would like to have my pop ups fade in, instead of just appear instantly when clicked on or off. Can you please help me with the code and explain what the issue is?

I have read a whole slew of strings on here and I haven't gotten anything to work. The most similar string didn't do the trick: CSS transition not working when changing class by javascript

My 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;
}

My JS:

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

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

My 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>

A user should be able to click on the thumbnail and see the pop up fade in. When they close the pop up from the X it should fade closed.