CSS Transitions Not Working When Adding A Class In Javascript

Question

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.

You cannot animate, `display` property, try using `opacity` or `visibility` — weegee, Apr 26 '19 at 15:37
When use animation, can`t use de property display. Demo https://codepen.io/anon/pen/gyqwKM — Ernest, Apr 26 '19 at 15:41
window.document, thank you I changed display(none/block) to visibility(hidden/visible) and it worked. — Iisrael, Apr 26 '19 at 15:45
Paulie_D - Think you for marking this as a duplicate, sorry, I didn't see the string you linked above. That had the answer I needed. — Iisrael, Apr 26 '19 at 15:46

CSS Transitions Not Working When Adding A Class In Javascript

0 Answers0