Javascript-过渡隐藏/显示效果

Question

im trying to get a transition to make a more smooth show/hide effect. I understand how to use the getID and how to show/hide, now my script works Im not able to add any smooth animation, where would I start for this?

function showmorepanel(id) {
var bio = document.getElementById("bio" + id);
var cardimg = document.getElementById("cardimg" + id);
  if (bio.style.display === "none") {
        bio.style.display = "block";
        cardimg.style.display = "none";
    } else {
        bio.style.display = "none";
        cardimg.style.display = "block";
    }
}

Answer 1

You can do that with css transition and JS to toggle to other class. Something like

 function showmorepanel(id) { var bio = document.getElementById("bio" + id); var cardimg = document.getElementById("cardimg" + id); bio.classList.toggle("hide"); cardimg.classList.toggle("hide"); } 

 .show{ opacity: 1; transition: opacity 1s; } .hide { opacity: 0; transition: opacity 1s; } 

 <button onclick="showmorepanel(2)">Hit</button> <p id="bio2" class="show">1- This text will toggle on clicking above button</p> <p id="cardimg2" class="hide">2- This text will toggle on clicking above button</p>