Question

我正在尝试平滑过渡。单击该部分时，它会扩展以显示下方的文本。我想为此添加一个过渡，以使其更慢，更流畅。

我试图通过向“活动”类添加过渡来做到这一点，但这不好。

FYI-仍在学习JS和高级CSS，所以我的知识有限！

谢谢！

list1

mw.loader.load ('/w/index.php?title=MediaWiki:bootstrap.js&action=raw&ctype=text/javascript');

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
      
    }
  });
}

Answer 1

您无法将display:none;转换为display:block; 这就是我在您的JS中所做的更改，以使其起作用：

let teams = document.querySelectorAll(".team-member");
//note forEach is equal to your for(i ...) and the (team) is your "this" variable 
teams.forEach((team) => {
    let col = team.firstElementChild;
    let content = team.lastElementChild;

    let colH = col.clientHeight;
    let contentH = content.clientHeight;    
    team.style.height = `${colH}px`

    team.addEventListener("click", () => {

        if (team.style.height == `${colH}px`) {
      team.style.height = `${colH + contentH}px`
    } else {
      team.style.height = `${colH}px`
    }
    });
});

，并将overflow:hidden;添加到您的团队成员课程中我建议您学习使用forEach函数，它们比for(i ...)

好得多

Answer 2

显示：none / block不适用于转换。您应该通过默认不透明度添加样式属性：1;过渡：.5s缓解不透明度；到您的可折叠课程。

.collapsible {
    opacity: 1;
    transition: ease 0.5s opacity;
}
.is-fadeout {
    opacity: 0; 
}

添加此.is-fadeout类onclick，并在0.5秒后超时，不显示任何属性

向onClick div添加过渡

2 个答案: