我为我目前正在进行的项目创建了一个手风琴。我使用wordpress，所以我可以选择使用插件，但我想挑战自己。我在为div触发淡出转换类时遇到了问题。淡入函数可以工作，但淡出不工作。我该如何触发它？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #fff;
color:black;
cursor: pointer;
padding: 18px;
width: 100%;
border-radius: 15px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
box-shadow: 2px 2px 6px #888888;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 10px 0;
display: none;
overflow: hidden;
animation: fadeIn 0.2s ease-in both;
}
.spaceboy {
height: 15px;
}
.holder {
padding: 10px;
background-color: #00000090;
border-radius: 15px;
transition: 0.5s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -5%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(0, -5%, 0);
}
}
</style>
</head>
<body>
<button class="accordion">Section 1</button>
<div class="panel">
<div class="holder">
<p>text</p>
</div>
</div>
<div class="spaceboy"></div>
<button class="accordion">Section 2</button>
<div class="panel">
<div class="holder">
<p>text</p>
</div>
</div>
<div class="spaceboy"></div>
<button class="accordion">Section 3</button>
<div class="panel">
<div class="holder">
<p>text</p>
</div>
</div>
<div class="spaceboy"></div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
我希望你能帮助我。我是新来的，所以我很难同时理解。非常感谢。
首先，区分动画和转换，无需使用关键帧进行转换。您应该添加您想要转换的属性，如下所示：
.accordion {
/* other css rules */
visibility: hidden;
transition: visibility 1s;
}
.accordion.active {
/* other css rules */
visibility: visible;
}
或者添加其他您想要转换的属性，如下所示：
.accordion {
/* other css rules */
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 0.5s;
}
.accordion.active {
/* other css rules */
visibility: visible;
opacity: 1;
}
无法转换显示特性，请使用可见性和不透明度创建渐变。我希望这个链接会有所帮助。有关css转换的完整指南，请查看此链接