Javascript-過渡隱藏/顯示效果

Question

我正在嘗試進行過渡，以使顯示/隱藏效果更加流暢。 我了解如何使用getID以及如何顯示/隱藏，現在我的腳本有效了，我無法添加任何平滑的動畫，我將從何處開始？

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

您可以通過css轉換和JS切換到其他類來實現。 就像是

 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>