Question

im试图进行过渡以使显示/隐藏效果更加流畅。我知道如何使用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>

Javascript-过渡隐藏/显示效果

1 个答案: